tailwind.config.js

module.exports = {
  purge: {
    content: [
      'app/**/*.php',
      'resources/**/*.html',
      'resources/**/*.js',
      'resources/**/*.php',
      'resources/**/*.vue',
    ],

    // These options are passed through directly to PurgeCSS
    options: {
      safelist: [
        /-active$/,
        /-enter$/,
        /-leave-to$/,
        /show$/,
        'bg-green-400',
        'bg-red-400',
        'bg-grey-400',
      ],
    },
  },
  theme: {
    colors: {
      white: '#FFF',
      black: '#000',
      transparent: 'transparent',
      indigo: {
        50: '#E0E8F9',
        100: '#BED0F7',
        200: '#98AEEB',
        300: '#7B93DB',
        400: '#647ACB',
        500: '#4C63B6',
        600: '#4055A8',
        700: '#35469C',
        800: '#2D3A8C',
        900: '#19216C',
      },
      cyan: {
        50: '#E1FCF8',
        100: '#C1FEF6',
        200: '#92FDF2',
        300: '#62F4EB',
        400: '#3AE7E1',
        500: '#1CD4D4',
        600: '#0FB5BA',
        700: '#099AA4',
        800: '#07818F',
        900: '#05606E',
      },
      grey: {
        50: '#F5F7FA',
        100: '#E4E7EB',
        200: '#CBD2D9',
        300: '#9AA5B1',
        400: '#7B8794',
        500: '#616E7C',
        600: '#52606D',
        700: '#3E4C59',
        800: '#323F4B',
        900: '#1F2933',
      },
      pink: {
        50: '#FFE3EC',
        100: '#FFB8D2',
        200: '#FF8CBA',
        300: '#F364A2',
        400: '#E8368F',
        500: '#DA127D',
        600: '#BC0A6F',
        700: '#A30664',
        800: '#870557',
        900: '#620042',
      },
      red: {
        50: '#FFE3E3',
        100: '#FFBDBD',
        200: '#FF9B9B',
        300: '#F86A6A',
        400: '#EF4E4E',
        500: '#E12D39',
        600: '#CF1124',
        700: '#AB091E',
        800: '#8A041A',
        900: '#610316',
      },
      yellow: {
        50: '#FFFBEA',
        100: '#FFF3C4',
        200: '#FCE588',
        300: '#FADB5F',
        400: '#F7C948',
        500: '#F0B429',
        600: '#DE911D',
        700: '#CB6E17',
        800: '#B44D12',
        900: '#8D2B0B',
      },
      green: {
        50: '#E3F9E5',
        100: '#C1F2C7',
        200: '#91E697',
        300: '#51CA58',
        400: '#31B237',
        500: '#18981D',
        600: '#0F8613',
        700: '#0E7817',
        800: '#07600E',
        900: '#014807',
      },
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
    },
    container: {
      center: true,
      padding: '1.5rem',
    },
  },
  plugins: [
    // Some useful comment
  ],
}