tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/features/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1440px',
      '3xl': '1920px',
      '4xl': '2560px',
      '5xl': '3840px',
    },
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
    colors: {
      signin: 'var(--color-signin)',
      signinHover: 'var(--color-signin-hover)',
      signout: 'var(--color-signout)',
      signoutHover: 'var(--color-signout-hover)',
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      secondaryHover: 'var(--color-secondary-hover)',
      accent: 'var(--color-accent)',
      danger: 'var(--color-danger)',
      errorText: 'var(--color-error-text)',
      background: 'var(--color-background)',
      surface: 'var(--color-surface)',
      muted: 'var(--color-muted)',
      textPrimary: 'var(--color-text-primary)',
      textSecondary: 'var(--color-text-secondary)',
      gridLines: 'var(--color-grid-lines)',
      bgText: 'var(--color-bg-text)',
      border: 'var(--color-border)',
      white: 'var(--color-white)',
      green: 'var(--color-green)',
      shadow: 'var(--color-shadow)',
      overlay: 'var(--color-overlay)',
      sd1: 'var(--color-sd1)',
      sd2: 'var(--color-sd2)',
      sd3: 'var(--color-sd3)',
      meanLine: 'var(--color-mean-line)',
      navbar: 'var(--color-navbar)',
      borderColor: 'var(--border-color);',
      sun: 'var(--color-sun)',
      moon: 'var(--color-moon)',
      buttonMuted: 'var(--color-button-muted)',
      logo: 'var(--color-logo-l)',
      checkbox: 'var(--color-checkbox)',
      primaryLight: 'var(--color-primary-light)',
      primaryDark: 'var(--color-primary-dark)',
      tertiary: 'var(--color-tertiary)',
      tertiaryHover: 'var(--color-tertiary-hover)',
      success: 'var(--color-success)',
      successHover: 'var(--color-success-hover)',
      warning: 'var(--color-warning)',
      warningHover: 'var(--color-warning-hover)',
      info: 'var(--color-info)',
      infoHover: 'var(--color-info-hover)',
      neutral: {
        50: 'var(--color-neutral-50)',
        100: 'var(--color-neutral-100)',
        200: 'var(--color-neutral-200)',
        300: 'var(--color-neutral-300)',
      },
      dark: {
        signin: 'var(--color-signin)',
        signinHover: 'var(--color-signin-hover)',
        signout: 'var(--color-signout)',
        signoutHover: 'var(--color-signout-hover)',
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        secondaryHover: 'var(--color-secondary-hover)',
        accent: 'var(--color-accent)',
        danger: 'var(--color-danger)',
        errorText: 'var(--color-error-text)',
        background: 'var(--color-background)',
        surface: 'var(--color-surface)',
        textPrimary: 'var(--color-text-primary)',
        textSecondary: 'var(--color-text-secondary)',
        bgText: 'var(--color-bg-text)',
        muted: 'var(--color-muted)',
        gridLines: 'var(--color-grid-lines)',
        border: 'var(--color-border)',
        white: 'var(--color-white)',
        green: 'var(--color-green)',
        shadow: 'var(--color-shadow)',
        overlay: 'var(--color-overlay)',
        sd1: 'var(--color-sd1)',
        sd2: 'var(--color-sd2)',
        sd3: 'var(--color-sd3)',
        meanLine: 'var(--color-mean-line)',
        navbar: 'var(--color-navbar)',
        borderColor: 'var(--border-color);',
        sun: 'var(--color-sun)',
        moon: 'var(--color-moon)',
        buttonMuted: 'var(--color-button-muted)',
        logo: 'var(--color-logo-l)',
        checkbox: 'var(--color-checkbox)',
        primaryLight: 'var(--color-primary-light)',
        primaryDark: 'var(--color-primary-dark)',
        tertiary: 'var(--color-tertiary)',
        tertiaryHover: 'var(--color-tertiary-hover)',
        success: 'var(--color-success)',
        successHover: 'var(--color-success-hover)',
        warning: 'var(--color-warning)',
        warningHover: 'var(--color-warning-hover)',
        info: 'var(--color-info)',
        infoHover: 'var(--color-info-hover)',
        neutral: {
          50: 'var(--color-neutral-50)',
          100: 'var(--color-neutral-100)',
          200: 'var(--color-neutral-200)',
          300: 'var(--color-neutral-300)',
        },
      },
    },
  },
  plugins: [],
};

export default config;