hjemmesidekongen/ai/tailwind-v4

tailwind-v4

Tailwind v4 replaces the JS config file with CSS-first configuration. Theme, utilities, and variants all live in CSS.

What Changed from v3

• No tailwind.config.js — theme defined in CSS via @theme
• No @tailwind directives — replaced by @import "tailwindcss"
• All theme values become CSS variables automatically
• @utility / @variant replace plugin APIs; container queries built-in

Theme Configuration

Define tokens in @theme — Tailwind generates CSS variables and utility classes from them. Override defaults by redefining the same variable; remove them with --color-*: initial.

Key Rules

• Import as @import "tailwindcss" — not three @tailwind directives
• Define theme tokens in @theme {} block in the root CSS file
• Use @utility for custom utilities — integrates with all variants automatically
• @apply is acceptable for base element resets; avoid for component composition
• Dark mode: pick media-based or class-based — not both
• Container queries: @container on parent, @cq-sm: variants on children

See references/process.md for v3→v4 migration, @theme tokens, variant patterns, and anti-patterns.