tailwind.config.js

module.exports = {
  content: ['./src/**/**/**/*.{ts,tsx,js,jsx}'],
  theme: {
    colors: {
      'black': '#000000',
      'white': '#ffffff',
      'green': {
        500: 'var(--green-500)'
      },
      'gray': {
          100: 'var(--gray-100)',
          300: 'var(--gray-300)',
          500: 'var(--gray-500)',
          700: 'var(--gray-700)',
          800: 'var(--gray-800)',
          900: 'var(--gray-900)',
      },
      'error': {
          300: 'var(--error-300)',
          500: 'var(--error-500)',
          800: 'var(--error-800)',
          900: 'var(--error-900)'
      },
      'success': {
          300: 'var(--success-300)',
          500: 'var(--success-500)',
          800: 'var(--success-800)',
          900: 'var(--success-900)'
      }
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      boxShadow: {
        'card': '0px 12px 16px rgba(0, 0, 0, 0.3)',
      },
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {},
  plugins: [],
  darkMode: 'class',
}