module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './**/*.{html,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  /*
   Safelist: some classes are generated dynamically at runtime (template literals,
   props-driven classNames, or libraries that build class strings). Tailwind's
   static scanner can't see those, so include patterns here to ensure the
   utilities are generated in dev/production builds.
  */
  safelist: [
    // background colors (with optional slash opacity like bg-cyan-500/10)
    { pattern: /bg-(?:cyan|purple|pink|green|slate|yellow|white|black)-(?:50|100|200|300|400|500|600|700|800|900)(?:\/\d{1,3})?/, variants: ['hover', 'focus', 'active', 'md', 'lg', 'peer-checked', 'group-hover'] },
    // text colors
    { pattern: /text-(?:slate|cyan|green|pink|purple|yellow|white|black)-(?:50|100|200|300|400|500|600|700|800|900)/, variants: ['hover', 'focus', 'md', 'lg'] },
    // z-index utilities used in code
    { pattern: /z-\d+/, variants: ['md', 'lg'] },
    // width/height arbitrary values (w-[...], h-[...])
    { pattern: /w-\[.*\]/ },
    { pattern: /h-\[.*\]/ },
    // fractional/utility sizes
    { pattern: /w-(?:full|auto|\[1px\]|\[600px\])/, variants: ['md'] },
    { pattern: /h-(?:full|screen|\[70vh\])/, variants: ['md'] },
    // grid/cols
    { pattern: /grid-cols-\d+/ },
    // opacity utilities
    { pattern: /bg-[\w-]+\/(?:\d{1,3})/, variants: ['hover', 'focus'] },
  ],
  plugins: [],
};