tailwind.config.js

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  mode: 'jit',
  theme: {
    extend: {
      opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
      translate: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
      colors: {
        accent: {
          1: 'hsl(288 95,8% 90.6%',
          2: 'hsl(168, 83.5% 78.2%',
        },
        background: 'hsl(240 100% 4.3%)',
        'card-background': 'hsl(221 39% 11%)',
        'midnight-blue': 'hsl(240 100% 4.3%)',
        charcoal: 'rgba(4, 4, 4, 0.25)',
        colors: {
          gray: {
            50: '#F9FAFB',
            100: '#F3F4F6',
            200: '#E5E7EB',
            300: '#D1D5DB',
            400: '#9CA3AF',
            500: '#6B7280',
            600: '#4B5563',
            700: '#374151',
            800: '#1F2937',
            900: '#111827',
          },
          red: {
            50: '#FDF2F2',
            100: '#FDE8E8',
            200: '#FBD5D5',
            300: '#F8B4B4',
            400: '#F98080',
            500: '#F05252',
            600: '#E02424',
            700: '#C81E1E',
            800: '#9B1C1C',
            900: '#771D1D',
          },
          amber: {
            50: '#FDFDEA',
            100: '#FDF6B2',
            200: '#FCE96A',
            300: '#FACA15',
            400: '#E3A008',
            500: '#C27803',
            600: '#9F580A',
            700: '#8E4B10',
            800: '#723B13',
            900: '#633112',
          },
          emerald: {
            50: '#F3FAF7',
            100: '#DEF7EC',
            200: '#BCF0DA',
            300: '#84E1BC',
            400: '#31C48D',
            500: '#0E9F6E',
            600: '#057A55',
            700: '#046C4E',
            800: '#03543F',
            900: '#014737',
          },
          blue: {
            50: '#EBF5FF',
            100: '#E1EFFE',
            200: '#C3DDFD',
            300: '#A4CAFE',
            400: '#76A9FA',
            500: '#3F83F8',
            600: '#1C64F2',
            700: '#1A56DB',
            800: '#1E429F',
            900: '#233876',
          },
          indigo: {
            50: '#F0F5FF',
            100: '#E5EDFF',
            200: '#CDDBFE',
            300: '#B4C6FC',
            400: '#8DA2FB',
            500: '#6875F5',
            600: '#5850EC',
            700: '#5145CD',
            800: '#42389D',
            900: '#362F78',
          },
          violet: {
            50: '#F6F5FF',
            100: '#EDEBFE',
            200: '#DCD7FE',
            300: '#CABFFD',
            400: '#AC94FA',
            500: '#9061F9',
            600: '#7E3AF2',
            700: '#6C2BD9',
            800: '#5521B5',
            900: '#4A1D96',
          },
          pink: {
            50: '#FDF2F8',
            100: '#FCE8F3',
            200: '#FAD1E8',
            300: '#F8B4D9',
            400: '#F17EB8',
            500: '#E74694',
            600: '#D61F69',
            700: '#BF125D',
            800: '#99154B',
            900: '#751A3D',
          },
        },
      },
      scale: {
        110: '1.10',
      },
    },
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}