tailwind.config.js

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue'],
  theme: {
    extend: {
      colors: {
        red: {
          100: '#FDECEC',
          200: '#FABBBB',
          300: '#EE6D6D',
          400: '#E33838',
          500: '#CC0000',
          600: '#B00000',
          700: '#810000',
          800: '#630000',
          900: '#420000'
        },
        yellow: {
          100: '#FFFDF1',
          300: '#FFE363',
          500: '#FFD206',
          700: '#9A7003',
          900: '#472B00'
        },
        black: '#131720'
      },
      spacing: {
        72: '288px',
        80: '320px',
        96: '384px',
        112: '448px',
        '1/1': '100%',
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '3/10': '30%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666667%',
        '2/6': '33.333333%',
        '3/6': '50%',
        '4/6': '66.666667%',
        '5/6': '83.333333%',
        '1/12': '8.333333%',
        '2/12': '16.666667%',
        '3/12': '25%',
        '4/12': '33.333333%',
        '5/12': '41.666667%',
        '6/12': '50%',
        '7/12': '58.333333%',
        '8/12': '66.666667%',
        '9/12': '75%',
        '10/12': '83.333333%',
        '11/12': '91.666667%',
        '11/20': '55%'
      },
      fontSize: {
        '8xl': '6rem',
        '10xl': '8rem',
        huge: '10rem'
      }
    }
  },
  variants: {
    opacity: ['responsive', 'hover', 'focus', 'disabled'],
    margin: ['responsive', 'first']
  },
  plugins: []
}