tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ['./src/**/*.tsx', './src/server/utils/error-template.ts'],
  theme: {
    extend: {
      boxShadow: {
        custom: '0px 2px 8px rgba(0, 0, 0, 0.12)',
      },
      width: {
        'fit-content': 'fit-content',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        xxl: '40px',
        xl: '32px',
        lg: '28px',
        l: '24px',
        md: '18px',
        base: '16px',
        sm: '14px',
        tiny: '12px',
      },
      borderRadius: {
        tiny: '8px',
        sm: '16px',
        md: '32px',
        lg: '40px',
      },
      fill: {
        lightRed: '#FEF5F4',
        hotpink: '#E6007A',
        gray: '#575757',
      },
      colors: {
        cta: {
          jade: 'rgba(0, 179, 65, 1)',
          purple: 'rgba(109, 58, 238, 1)',
          cerulean: 'rgba(0, 148, 212, 1)',
          hover: {
            purple: 'rgba(109, 58, 238, 0.04)',
            purpleNoOpacity: 'rgba(249, 247, 254, 1)',
            jade: 'rgba(0, 179, 65, 0.04)',
            jadeNoOpacity: 'rgba(234, 243, 243, 1)',
            cerulean: 'rgba(0, 148, 212, 0.04)',
            ceruleanNoOpacity: 'rgba(234, 241, 251, 1)',
          },
        },
        bg: {
          system: 'rgba(243, 243, 242, 1)',
          primary: 'rgba(255, 255, 255, 1)',
          secondary: 'rgba(255, 255, 255, 1)',
        },
        text: {
          primary: 'rgba(0, 0, 0, 1)',
          secondary: 'rgba(0, 0, 0, 0.66)',
          tertiary: 'rgb(0, 0, 0, 0.45)',
          disabled: 'rgb(0, 0, 0, 0.25)',
        },
        fill: {
          30: 'rgba(0, 0, 0, 0.3)',
          24: 'rgba(0, 0, 0, 0.24)',
          18: 'rgba(0, 0, 0, 0.18)',
          12: 'rgba(0, 0, 0, 0.12)',
          6: 'rgba(0, 0, 0, 0.06)',
          4: 'rgba(0, 0, 0, 0.04)',
        },
        applied: {
          overlay: 'rgba(0, 0, 0, 0.4)',
          hover: 'rgba(51, 51, 51, 0.05)',
          stroke: 'rgba(0, 0, 0, 0.12)',
          separator: 'rgba(0, 0, 0, 0.08)',
        },
        accents: {
          pink: 'rgba(230, 0, 122, 1)',
          pinkDark: 'rgba(189, 0, 100, 1)',
          pinkLight: 'rgba(247, 168, 210, 1)',
          red: 'rgba(253, 73, 53, 1)',
          redTransparent: 'rgba(253, 73, 53, .12)',
          redMediumTransparent: 'rgba(253, 73, 53, .66)',
          redLight: 'rgba(254, 245, 244, 1)',
          disabled: 'rgba(246, 163, 207, 1)',
          green: 'rgba(0, 179, 65, 1)',
          greenLight: 'rgba(72, 204, 129)',
          greenTransparent: 'rgba(0, 179, 65, .12)',
        },
        purple: {
          50: '#FFE5F3',
          100: '#FFC7E5',
          200: '#FF8FCB',
          300: '#FF57B0',
          400: '#FF1F96',
          500: '#E6007A',
          600: '#B80062',
          700: '#8A0049',
          800: '#5C0031',
          900: '#2E0018',
        },
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
  safelist: [
    'grid-cols-1',
    'grid-cols-2',
    'grid-cols-3',
    'grid-cols-4',
    'grid-cols-5',
    'grid-cols-6',
    'grid-cols-7',
    'grid-cols-8',
    'grid-cols-9',
    'grid-cols-10',
    'grid-cols-11',
    'grid-cols-12',
    'grid-cols-none',
  ],
}