tailwind-csslisted

# Tailwind CSS v4 ## 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`. ## v3 to v4 Breaking Changes | v3 | v4 | Notes | |----|-----|-------| | `tailwind.config.ts` | `@theme` in CSS | Delete config file | | `@tailwind base/components/utilities` | `@import "tailwindcss"` | Single import | | `darkMode: "class"` | `@custom-variant dark (...)` | CSS-only | | `bg-gradient-to-r` | `bg-linear-to-r` | Also: `bg-radial`, `bg-conic` | | `bg-opacity-60` | `bg-red-500/60` | All `*-opacity-*` removed | | `round