ia-tailwind-csslisted

# Tailwind CSS v4 **Verify before implementing**: For v4-specific syntax (`@theme`, `@variant`, CSS-first config), look up current docs via Context7 (`query-docs`) before writing code. Tailwind v4 changed significantly from v3 and training data may be stale. ## CSS-First Configuration v4 eliminates `tailwind.config.ts`. All configuration lives in CSS. | Directive | Purpose | |-----------|---------| | `@import "tailwindcss"` | Entry point (replaces `@tailwind base/components/utilities`) | | `@theme { }` | Define/extend design tokens -- auto-generates utility classes | | `@theme inline { }` | Map CSS variables to Tailwind utilities without generating new vars | | `@theme static { }` | Define tokens that don't generate utilities | | `@utility name { }` | Create custom utilities (replaces `@layer components` + `@apply`) | | `@custom-variant name (selector)` | Define custom variants | ```css @import "tailwindcss"; @theme { --color-brand: oklch(0.72 0.11 178); --font-display: "Inter", sans-serif; --animate-fade-in: fade-in 0.2s ease-out; @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } } @custom-variant dark (&:where(.dark, .dark *)); ``` Tokens defined with `@theme` become utilities automatically: `--color-brand` produces `bg-brand`, `text-brand`, `border-brand`. Define z-index as tokens (`--z-modal: 50`) and reference via `z-(--z-modal)` instead of arbitrary `z-50`. **CSS Modules**: when using `.module.css` with Tailwind v4, add `@reference "#tailwi