pos-system/apps/web-client/tailwind.config.js

/**
 * EN: Tailwind CSS 4 Configuration
 * VI: Cấu hình Tailwind CSS 4
 *
 * Note: Tailwind CSS 4 uses CSS-first configuration with @theme directive in CSS files.
 * This config file extends the theme with additional utility classes based on CSS variables.
 * The main theme tokens are defined in src/styles/theme.css.
 *
 * Lưu ý: Tailwind CSS 4 sử dụng cấu hình CSS-first với @theme directive trong file CSS.
 * File config này mở rộng theme với các utility classes bổ sung dựa trên CSS variables.
 * Các theme tokens chính được định nghĩa trong src/styles/theme.css.
 */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './src/stories/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      // EN: Colors from CSS variables (theme.css)
      // VI: Màu sắc từ CSS variables (theme.css)
      colors: {
        bg: {
          primary: 'var(--bg-primary)',
          secondary: 'var(--bg-secondary)',
          tertiary: 'var(--bg-tertiary)',
          elevated: 'var(--bg-elevated)',
        },
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          tertiary: 'var(--text-tertiary)',
          inverse: 'var(--text-inverse)',
        },
        accent: {
          primary: 'var(--accent-primary)',
          secondary: 'var(--accent-secondary)',
          success: 'var(--accent-success)',
          warning: 'var(--accent-warning)',
          error: 'var(--accent-error)',
          info: 'var(--accent-info)',
        },
        chat: {
          'user-bubble': 'var(--chat-user-bubble)',
          'ai-bubble': 'var(--chat-ai-bubble)',
          'user-text': 'var(--chat-user-text)',
          'ai-text': 'var(--chat-ai-text)',
          timestamp: 'var(--chat-timestamp)',
          divider: 'var(--chat-divider)',
        },
        border: {
          primary: 'var(--border-primary)',
          secondary: 'var(--border-secondary)',
          focus: 'var(--border-focus)',
        },
      },
      // EN: Font families from CSS variables
      // VI: Font families từ CSS variables
      fontFamily: {
        sans: ['var(--font-sans)', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      // EN: Font sizes from CSS variables (for utility classes)
      // VI: Kích thước chữ từ CSS variables (cho utility classes)
      fontSize: {
        '6xl': ['var(--text-6xl)', { lineHeight: '1' }],
        '5xl': ['var(--text-5xl)', { lineHeight: '1' }],
        '4xl': ['var(--text-4xl)', { lineHeight: '1.1' }],
        '3xl': ['var(--text-3xl)', { lineHeight: '1.2' }],
        '2xl': ['var(--text-2xl)', { lineHeight: '1.3' }],
        'xl': ['var(--text-xl)', { lineHeight: '1.4' }],
        'lg': ['var(--text-lg)', { lineHeight: '1.5' }],
        'base': ['var(--text-base)', { lineHeight: '1.5' }],
        'sm': ['var(--text-sm)', { lineHeight: '1.5' }],
        'xs': ['var(--text-xs)', { lineHeight: '1.5' }],
      },
      // EN: Font weights from CSS variables
      // VI: Độ đậm chữ từ CSS variables
      fontWeight: {
        light: 'var(--font-light)',
        normal: 'var(--font-normal)',
        medium: 'var(--font-medium)',
        semibold: 'var(--font-semibold)',
        bold: 'var(--font-bold)',
      },
      // EN: Spacing from CSS variables (extends default Tailwind spacing)
      // VI: Khoảng cách từ CSS variables (mở rộng spacing mặc định của Tailwind)
      spacing: {
        'sidebar': 'var(--sidebar-width)',
        'chat-max': 'var(--chat-max-width)',
        // EN: Additional spacing utilities using CSS variables
        // VI: Các utility spacing bổ sung sử dụng CSS variables
        '0': 'var(--space-0)',
        '1': 'var(--space-1)',
        '2': 'var(--space-2)',
        '3': 'var(--space-3)',
        '4': 'var(--space-4)',
        '5': 'var(--space-5)',
        '6': 'var(--space-6)',
        '8': 'var(--space-8)',
        '10': 'var(--space-10)',
        '12': 'var(--space-12)',
        '16': 'var(--space-16)',
        '20': 'var(--space-20)',
      },
      // EN: Border radius from CSS variables
      // VI: Bo góc từ CSS variables
      borderRadius: {
        sm: 'var(--radius-sm)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        '2xl': 'var(--radius-2xl)',
        full: 'var(--radius-full)',
      },
      // EN: Box shadows from CSS variables
      // VI: Đổ bóng từ CSS variables
      boxShadow: {
        sm: 'var(--shadow-sm)',
        md: 'var(--shadow-md)',
        lg: 'var(--shadow-lg)',
        xl: 'var(--shadow-xl)',
        glow: 'var(--shadow-glow)',
      },
      // EN: Animation timing functions
      // VI: Hàm thời gian animation
      transitionTimingFunction: {
        'in': 'var(--ease-in)',
        'out': 'var(--ease-out)',
        'in-out': 'var(--ease-in-out)',
        spring: 'var(--ease-spring)',
      },
      // EN: Animation durations
      // VI: Thời lượng animation
      transitionDuration: {
        fast: 'var(--duration-fast)',
        normal: 'var(--duration-normal)',
        slow: 'var(--duration-slow)',
        slower: 'var(--duration-slower)',
      },
      // EN: Max widths for containers
      // VI: Chiều rộng tối đa cho containers
      maxWidth: {
        'container-sm': 'var(--container-sm)',
        'container-md': 'var(--container-md)',
        'container-lg': 'var(--container-lg)',
        'container-xl': 'var(--container-xl)',
        'container-2xl': 'var(--container-2xl)',
        'chat-max': 'var(--chat-max-width)',
      },
      // EN: Screen breakpoints (matching CSS variables)
      // VI: Điểm ngắt màn hình (khớp với CSS variables)
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      // EN: Line heights from CSS variables
      // VI: Chiều cao dòng từ CSS variables
      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)',
      },
    },
  },
  plugins: [],
};