Tailwind CSS v4 Configuration

Goal

Use Tailwind v4's CSS-first configuration. Keep JavaScript config only when project tooling requires it.

Rules

• Import Tailwind with @import "tailwindcss";.
• Define theme tokens with @theme.
• Rely on automatic content detection by default.
• Use @source only for missed files or external packages.
• Use CSS custom properties for theme values.
• Check browser support before using v4 in legacy environments.
• Do not copy v3 content config unless needed.
• Do not use old @tailwind base/components/utilities in v4 setup.

Pattern