bakery-ia/frontend/tailwind.config.js

import { tailwindColorConfig } from './src/styles/colors.js';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add more explicit paths for Docker environment
    "/app/index.html",
    "/app/src/**/*.{js,ts,jsx,tsx}",
    // Add specific files that we know contain classes
    "./src/pages/**/*.tsx",
    "./src/components/**/*.tsx",
  ],
  darkMode: 'class',
  safelist: [
    // Always include common utility classes that might be missed
    'min-h-screen',
    'bg-gradient-to-b',
    'from-amber-50',
    'to-orange-100',
    'max-w-7xl',
    'mx-auto',
    'px-4',
    'sm:px-6',
    'lg:px-8',
    'text-4xl',
    'sm:text-5xl',
    'md:text-6xl',
    'tracking-tight',
    'font-extrabold',
    'text-gray-900',
    'text-orange-600',
    'bg-white',
    'shadow-sm',
    'bg-orange-500',
    'rounded-md',
    'shadow-lg',
    'bg-gray-50',
    'rounded-lg',
    // Flexbox and centering classes (critical for proper alignment)
    'flex',
    'items-center',
    'justify-center',
    'flex-1',
    'w-8',
    'h-8',
    'rounded-full',
    'bg-orange-600',
    'bg-gray-200',
    'text-white',
    'text-gray-600',
    'h-0.5',
    'mx-4',
    'justify-between',
    'grid',
    'grid-cols-1',
    'grid-cols-2',
    'gap-4',
    'space-x-4',
    'space-y-4',
    'space-y-6',
    'block',
    'text-sm',
    'font-medium',
    'text-gray-700',
    'max-w-md',
    'w-full',
    'text-center',
    'text-3xl',
    'font-extrabold',
    'mt-6',
    'mt-2',
    'mt-1',
    'mb-8',
    'mb-4',
    'ml-2',
    'p-8',
    'py-12',
    'px-4',
    'text-xs',
    'text-gray-500',
    'text-orange-500',
    'hover:text-orange-500',
    'font-medium',
    'h-12',
    'w-12',
    'h-4',
    'w-4',
    'mt-0.5',
    'border-gray-300',
    'text-red-600',
    'focus:ring-orange-500',
    // Include responsive variants
    {
      pattern: /^(text|bg|border)-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl)$/,
    },
    {
      pattern: /^(p|m|px|py|mx|my)-(0|1|2|3|4|5|6|8|10|12|16|20|24|32)$/,
    },
    // Include gradient patterns
    {
      pattern: /^(bg-gradient-to|from|via|to)-(r|l|t|b|tr|tl|br|bl|amber|orange|gray)-(50|100|200|300|400|500|600|700|800|900)$/,
    },
    // Include semantic color classes
    {
      pattern: /^(bg|text|border)-(primary|secondary)-(50|100|200|300|400|500|600|700|800|900)$/,
    },
  ],
  theme: {
    extend: {
      colors: {
        // Import centralized color configuration
        ...tailwindColorConfig,
        // Keep compatibility aliases
        orange: tailwindColorConfig.primary,
        amber: tailwindColorConfig.primary,
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
      },
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'spin-slow': 'spin 3s linear infinite',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'bounce-slow': 'bounce 2s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '120': '30rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'glow': '0 0 20px rgba(249, 115, 22, 0.3)',
        'glow-lg': '0 0 40px rgba(249, 115, 22, 0.4)',
        'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}