puffin-app/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'puffin-blue': {
          DEFAULT: '#005A9C',
          light: '#E6F0F6',
          focus: '#3B82F6',
        },
        'puffin-gray': {
          label: '#6B7280',
          border: '#D1D5DB',
          disabled: '#F3F4F6',
        },
        'puffin-error': {
          DEFAULT: '#EF4444',
          focus: '#F87171',
        },
      },
      boxShadow: {
        'focus-blue': '0 0 0 3px rgba(59, 130, 246, 0.3)',
        'focus-red': '0 0 0 3px rgba(239, 68, 68, 0.3)',
      },
    },
  },
  plugins: [],
  safelist: [
    // Colors
    {
      pattern: /^(bg|text|border|hover:bg|hover:text)-(blue|gray|green|red|purple|teal|orange|indigo)-(50|100|200|300|400|500|600|700|800|900)/,
    },
    // Spacing
    {
      pattern: /^(p|px|py|m|mx|my|mt|mb|ml|mr)-[0-9]+/,
    },
    // Sizing
    {
      pattern: /^(w|h)-[0-9]+/,
    },
    // Layout
    {
      pattern: /^(min-h|max-w|aspect)-/,
    },
    // Grid
    {
      pattern: /^(grid-cols|gap)-/,
    },
    // Flexbox
    {
      pattern: /^(flex|items|justify|space|rounded|shadow)/,
    },
    // Transitions
    'transform',
    'transition-colors',
    'transition-transform',
    'duration-300',
    'hover:scale-105',
    // Interactivity
    'cursor-pointer',
    'cursor-not-allowed',
    'disabled:opacity-50',
    'disabled:hover:text-gray-600',
    // Typography
    'font-semibold',
    'font-bold',
    'text-center',
    'text-left',
    // Position
    'relative',
    'absolute',
    'fixed',
    'inset-0',
    // Display
    'object-cover',
    'overflow-hidden',
    'drop-shadow-lg',
    // Animation
    'animate-spin',
    // Focus
    'focus:ring',
    'focus:ring-blue-500',
    'focus:border-blue-500',
    'focus:ring-opacity-50',
    'focus:outline-none',
    // Forms
    'form-input',
    'form-select',
    'form-textarea'
  ]
};