tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['media'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
        bp1: '500px',
        bp2: '768px',
        bp3: '1024px',
      },
    },
    extend: {
      colors: {
        border: 'var(--border)',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        theme1: 'var(--theme1)',
        theme2: 'var(--theme2)',
        theme3: 'var(--theme3)',
        theme4: 'var(--theme4)',
        theme5: 'var(--theme5)',
        theme6: 'var(--theme6)',
        theme7: 'var(--theme7)',
        theme8: 'var(--theme8)',
        theme9: 'var(--theme9)',
        theme10: 'var(--theme10)',
        theme11: 'var(--theme12)',
        theme12: 'var(--theme11)',
        accent1: 'var(--accent1)',
        accent2: 'var(--accent2)',
        accent3: 'var(--accent3)',
        accent4: 'var(--accent4)',
        accent5: 'var(--accent5)',
        accent6: 'var(--accent6)',
        accent7: 'var(--accent7)',
        accent8: 'var(--accent8)',
        accent9: 'var(--accent9)',
        accent10: 'var(--accent10)',
        accent11: 'var(--accent12)',
        accent12: 'var(--accent11)',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
      },
      borderRadius: {
        xl: 'var(--radii-xl)',
        l: 'var(--radii-l)',
        m: 'var(--radii-m)',
        s: 'var(--radii-s) !important',
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      spacing: {
        '4xs': 'var(--space-4xs)',
        '3xs': 'var(--space-3xs)',
        '2xs': 'var(--space-2xs)',
        xs: 'var(--space-xs)',
        s: 'var(--space-s)',
        m: 'var(--space-m)',
        l: 'var(--space-l)',
        xl: 'var(--space-xl)',
        '2xl': 'var(--space-2xl)',
        '3xl': 'var(--space-3xl)',
      },
      fontSize: {
        'step--3': 'var(--step--3)',
        'step--2': 'var(--step--2)',
        'step--1': 'var(--step--1)',
        'step-0': 'var(--step-0)',
        base: 'var(--step-0)',
        'step-1': 'var(--step-1)',
        'step-2': 'var(--step-2)',
        'step-3': 'var(--step-3)',
        'step-4': 'var(--step-4)',
        'step-5': 'var(--step-5)',
        'step-6': 'var(--step-6)',
        'step-7': 'var(--step-7)',
        'step-8': 'var(--step-8)',
        'step-9': 'var(--step-9)',
        'step-10': 'var(--step-10)',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};