theme

gistfile1.txt

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.vue'],
  darkMode: 'class',
  corePlugins: {
    container: false
  },
  theme: {
    colors: {
      offwhite: 'var(--offwhite)',
      nightblue: 'var(--nightblue)',
      darkblue: 'var(--darkblue)',
      lightnightblue: 'var(--lightnightblue)',
      shinyred: 'var(--shinyred)',
      dreamblue: 'var(--dreamblue)',
      moonlightblue: 'var(--moonlightblue)'
    },
    fontSize: {
      12: ['0.75rem', '1rem'],
      14: ['0.875rem', '1.25rem'],
      16: ['1rem', '1.5rem'],
      18: ['1.125rem', '1.75rem'],
      20: ['1.25rem', '1.75rem'],
      24: ['1.5rem', '2rem'],
      30: ['1.875rem', '1'],
      36: ['2.25rem', '1'],
      48: ['3rem', '1'],
      60: ['3.75rem', '1'],
      72: ['4.5rem', '1'],
      84: ['5.25rem', '1'],
      96: ['6rem', '1']
    },
    // https://en.wikipedia.org/wiki/Display_resolution#/media/File:Vector_Video_Standards8.svg
    screens: {
      xs: '480px',
      sm: '640px',
      md: '800px',
      lg: '960px',
      xl: '1120px',
      '2xl': '1280px'
    },
    extend: {
      animation: {
        clockwise: 'clockwise 2s linear infinite',
        anticlockwise: 'anticlockwise 2s linear infinite'
      },
      keyframes: {
        clockwise: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' }
        },
        anticlockwise: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(-360deg)' }
        }
      },
      maxWidth: {
        xs: '480px',
        sm: '640px',
        md: '800px',
        lg: '960px',
        xl: '1120px',
        '2xl': '1280px',
        'half-screen': '50vw'
      },
      screens: {
        // dark: { raw: '(prefers-color-scheme: dark)' }
      },
      // tailwind darkmode for prose plugin
      // https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
      typography: (theme) => ({
        default: {
          css: {
            a: {
              color: theme('colors.shinyred'),
              '&:hover': {
                color: theme('colors.shinyred')
              }
            }
          }
        },
        dark: {
          css: {
            color: theme('colors.offwhite'),
            a: {
              color: theme('colors.shinyred'),
              '&:hover': {
                color: theme('colors.shinyred')
              }
            },
            h1: {
              color: theme('colors.offwhite')
            },
            h2: {
              color: theme('colors.offwhite')
            },
            h3: {
              color: theme('colors.offwhite')
            },
            'h3 > span': {
              color: theme('colors.shinyred')
            },
            h4: {
              color: theme('colors.offwhite')
            },
            'h4 > span': {
              color: theme('colors.shinyred')
            },
            h5: {
              color: theme('colors.offwhite')
            },
            h6: {
              color: theme('colors.offwhite')
            },
            strong: {
              color: theme('colors.offwhite')
            },
            code: {
              color: theme('colors.offwhite')
            },
            figcaption: {
              color: theme('colors.offwhite')
            }
          }
        }
      })
    }
  },
  variants: {
    extend: {
      typography: ['dark']
    }
  },

  plugins: [
    // https://github.com/tailwindlabs/tailwindcss-typography
    require('@tailwindcss/typography'),
    // https://github.com/tailwindlabs/tailwindcss-forms
    require('@tailwindcss/forms')({
      strategy: 'class'
    })
  ]
};