tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,tsx,ts}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--background-color)',
        neutral: {
          50: 'var(--color-neutral-50)',
          100: 'var(--color-neutral-100)',
          200: 'var(--color-neutral-200)',
          300: 'var(--color-neutral-300)',
          400: 'var(--color-neutral-400)',
          500: 'var(--color-neutral-500)',
          600: 'var(--color-neutral-600)',
          700: 'var(--color-neutral-700)',
          800: 'var(--color-neutral-800)',
          900: 'var(--color-neutral-900)',
        },
        brand: {
          300: 'var(--color-brand-300)',
          500: 'var(--color-brand-500)',
          600: 'var(--color-brand-600)',
          700: 'var(--color-brand-700)',
        },
      },
      spacing: {
        xxsmall: 'var(--spacing-xxsmall)',
        xsmall: 'var(--spacing-xsmall)',
        small: 'var(--spacing-small)',
        medium: 'var(--spacing-medium)',
        big: 'var(--spacing-big)',
        xbig: 'var(--spacing-xbig)',
        xxbig: 'var(--spacing-xxbig)',
        large: 'var(--spacing-large)',
        xlarge: 'var(--spacing-xlarge)',
        xxlarge: 'var(--spacing-xxlarge)',
        huge: 'var(--spacing-huge)',
        xhuge: 'var(--spacing-xhuge)',
        xxhuge: 'var(--spacing-xxhuge)',
        xss: 'var(--spacing-xxs)',
        xs: 'var(--spacing-xs)',
        sm: 'var(--spacing-sm)',
        md: 'var(--spacing-md)',
        lg: 'var(--spacing-lg)',
        xl: 'var(--spacing-xl)',
        '2xl': 'var(--spacing-2xl)',
        '3xl': 'var(--spacing-3xl)',
      },
      letterSpacing: {
        display1: 'var(--type-display-1-letter-spacing)',
        headline2: 'var(--type-headline-2-strong-letter-spacing)',
      },
      fontFamily: {
        'font-body': 'var(--font-body)',
      },
      fontWeight: {
        thin: 'var(--font-thin)',
        extralight: 'var(--font-extralight)',
        light: 'var(--font-light)',
        normal: 'var(--font-normal)',
        medium: 'var(--font-medium)',
        semibold: 'var(--font-semibold)',
        bold: 'var(--font-bold)',
        extrabold: 'var(--font-extrabold)',
        black: 'var(--font-black)',
      },
      fontSize: {
        xs: ['var(--font-xs)', { lineHeight: 'var(--leading-none)' }],
        sm: ['var(--font-sm)', { lineHeight: 'var(--leading-tight)' }],
        base: ['var(--font-md)', { lineHeight: 'var(--leading-snug)' }],
        lg: ['var(--font-lg)', { lineHeight: 'var(--leading-normal)' }],
        xl: ['var(--font-xl)', { lineHeight: 'var(--leading-relaxed)' }],
        '2xl': ['var(--font-2xl)', { lineHeight: 'var(--leading-loose)' }],
        '3xl': ['var(--font-3xl)', { lineHeight: '2.25rem' }],
        '4xl': ['var(--font-4xl)', { lineHeight: '2.5rem' }],
        '5xl': ['var(--font-5xl)', { lineHeight: '1' }],
      },
      lineHeight: {
        none: 'var(--leading-none)',
        tight: 'var(--leading-tight)',
        snug: 'var(--leading-snug)',
        normal: 'var(--leading-normal',
        relaxed: 'var(--leading-relaxed)',
        loose: 'var(--leading-loose)',
        3: 'var(--leading-3)',
        4: 'var(--leading-4)',
        5: 'var(--leading-5)',
        6: 'var(--leading-6)',
        7: 'var(--leading-7)',
        8: 'var(--leading-8)',
        9: 'var(--leading-9)',
        10: 'var(--leading-10)',
      },
      borderWidth: {
        1: 'var(--shape-border-width-1)',
        2: 'var(--shape-border-width-2)',
        3: 'var(--shape-border-width-3)',
        4: 'var(--shape-border-width-4)',
      },
      borderRadius: {
        1: 'var(--shape-border-radius-1)',
        2: 'var(--shape-border-radius-2)',
        3: 'var(--shape-border-radius-3)',
      },
      dropShadow: {
        1: 'var(--shape-shadow-1)',
        2: 'var(--shape-shadow-2)',
        3: 'var(--shape-shadow-3)',
      },
      strokeWidth: {
        1: 'var(--shape-icon-stroke-1)',
        2: 'var(--shape-icon-stroke-2)',
        3: 'var(--shape-icon-stroke-3)',
        4: 'var(--shape-icon-stroke-4)',
      },
      keyframes: {
        slideUp: {
          '0%': { transform: 'translateY(100%)' },
          '100%': { transform: 'translateY(0)' },
        },
        slideDown: {
          '0%': { transform: 'translateY(0)' },
          '100%': { transform: 'translateY(100%)' },
        },
      },
      animation: {
        slideUp: 'slideUp 0.3s ease-out forwards',
        slideDown: 'slideDown 0.3s ease-out forwards',
      },
    },

    plugins: [],
  },
};