tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [
  	'./resources/**/*.html',
	'./app/**/*.php',
	 './resources/**/*.php',
	  './content/**/*.md'
  ],
  mode: 'jit',
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            lineHeight: '1.5',
            color: false,
            fontWeight: false,
            a: {
              color: false,
              '&:hover': {
                color: false,
              },
            },
          },
        },
      },
      colors: {
        black: '#010001',
        gray: {
          100: '#f7fafc',
          200: '#edf2f7',
          300: '#e2e8f0',
          400: '#cbd5e0',
          500: '#a0aec0',
          600: '#718096',
          700: '#4a5568',
          800: '#2d3748',
          900: '#1a202c',
        },
        blue: {
          100: '#ebf8ff',
          200: '#bee3f8',
          300: '#90cdf4',
          400: '#63b3ed',
          500: '#4299e1',
          600: '#3182ce',
          700: '#2b6cb0',
          800: '#2c5282',
          900: '#2a4365',
        },
      },
      width: {
        '28': '7rem'
      },
      height: {
        '14': '3.5rem',
        '72': '18rem',
        '100': '25rem',
        '114': '28.5rem',
        'square': '94vw'
      },
      margin: { '-14': '-4rem' },
      maxWidth: {
        'base': '31rem',
      },
      maxHeight: {
        'xl': '36rem'
      },
      scale: { '-100': '-1'},
      boxShadow: {
        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)'
      }
    },
    fontFamily: {
      sans: defaultTheme.fontFamily.sans,
      mono: defaultTheme.fontFamily.mono,
      serif: [
        'Playfair Display',
        ...defaultTheme.fontFamily.serif
      ],
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '4xxl': '2.6rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
      '8xl': '6rem'
    },
  },
  variants: {
    cursor: ['responsive', 'hover', 'focus'],
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    outline: ['focus'],
    display: ['responsive', 'hover', 'group-hover']
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}