text: const colors = require('tailwindcss/colors')
  const defaultTheme = require('tailwindcss/defaultTheme')
  
  module.exports = {
    content: ['./src/components/**/*.js', './public/index.html'],
    safelist: [
      'bg-word',
      'bg-phrase',
      'bg-song',
      'bg-story',
      'bg-tertiaryA',
      'bg-tertiaryB',
      'bg-tertiaryC',
      'border-word',
      'border-phrase',
      'border-song',
      'border-story',
      'border-tertiaryA',
      'border-tertiaryB',
      'border-tertiaryC',
      'custom-page',
      'from-word',
      'from-phrase',
      'from-song',
      'from-story',
      'ql-video',
      'to-word',
      'to-phrase',
      'to-song',
      'to-story',
      'to-word-dark',
      'to-phrase-dark',
      'to-song-dark',
      'to-story-dark',
      'text-word',
      'text-phrase',
      'text-song',
      'text-story',
      'text-wordText',
      'text-phraseText',
      'text-songText',
      'text-storyText',
      'wysiwyg',
    ],
    theme: {
      fontFamily: {
        sans: ['BCSans', ...defaultTheme.fontFamily.sans],
        serif: [...defaultTheme.fontFamily.serif],
        mono: [...defaultTheme.fontFamily.mono],
      },
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        print: { raw: 'print' },
      },
      maxHeight: {
        '1/2-screen': '50vh',
        '3/4-screen': '75vh',
      },
      flex: {
        1: '1 1 0%',
        auto: '1 1 auto',
        initial: '0 1 auto',
        none: 'none',
        basis: '0 0 19.7%',
      },
      extend: {
        animation: {
          'pulse-blur': 'pulse-blur 2.5s linear infinite',
        },
        borderWidth: {
          12: '12px',
        },
        fontSize: {
          xxs: '.5rem',
        },
        height: {
          '1/4-screen': '25vh',
          '1/3-screen': '33vh',
          '2/5-screen': '40vh',
          '1/2-screen': '50vh',
          '2/3-screen': '66vh',
          '3/4-screen': '75vh',
          '4/5-screen': '80vh',
        },
        width: {
          '1/4-screen': '25vw',
          '1/3-screen': '33vw',
          '2/5-screen': '40vw',
          '1/2-screen': '50vw',
          '2/3-screen': '66vw',
          '3/4-screen': '75vw',
          '4/5-screen': '80vw',
        },
        keyframes: {
          'pulse-blur': {
            '0%, 50%, 100%': {
              transform: 'scale(1)',
              filter: 'blur(0px)',
            },
            '25%': {
              transform: 'scale(0.6)',
              filter: 'blur(2px)',
            },
            '75%': {
              transform: 'scale(1.4)',
              filter: 'blur(2px)',
            },
          },
        },
        translate: {
          '1/8': '12.5%',
        },
        colors: {
          // Dark Blue
          primary: {
            light: '#44677E',
            DEFAULT: '#264653',
            dark: '#1b313a',
          },
          // Dark Orange
          secondary: {
            light: '#b07363',
            DEFAULT: '#8E3720',
            dark: '#632716',
          },
          // Purple
          tertiaryA: {
            light: '#857689',
            DEFAULT: '#513B56',
            dark: '#39293c',
          },
          // Green/Grey
          tertiaryB: {
            light: '#878a80',
            DEFAULT: '#54584A',
            dark: '#3b3e34',
          },
          // Yellow/Orange Accent - e.g. Stats WIdget
          tertiaryC: {
            DEFAULT: '#EFAD1A',
          },
          word: {
            light: '#6ABAB1',
            DEFAULT: '#2A9D8F',
            dark: '#1D6E64',
          },
          phrase: {
            light: '#D5A169',
            DEFAULT: '#C37829',
            dark: '#89541D',
          },
          song: {
            light: '#a84d7b',
            DEFAULT: '#830042',
            dark: '#5c002e',
          },
          story: {
            light: '#f0d697',
            DEFAULT: '#E9C46A',
            dark: '#a3894a',
          },
          wordText: {
            DEFAULT: '#264653',
          },
          phraseText: {
            DEFAULT: '#9A270A',
          },
          songText: {
            DEFAULT: '#830042',
          },
          storyText: {
            DEFAULT: '#8C5822',
          },
          'fv-charcoal': {
            light: '#54584A',
            DEFAULT: '#313133',
            dark: '#222224',
          },
          'fv-warning-red': {
            DEFAULT: '#D64A4A',
          },
          gray: colors.stone,
        },
      },
    },
    plugins: [require('@tailwindcss/aspect-ratio')],
  }
  