CSS-first theme customization
Tailwind CSS v4 emphasizes CSS-first configuration for many common theme customizations. The @theme directive lets you define design tokens that participate in Tailwind's utility and variant system. This is different from many v3 tutorials that put most theme customization in tailwind.config.js.
Use the current official documentation for exact syntax and supported namespaces. Theme tokens should express stable design decisions such as brand colors, font families, spacing, and breakpoints—not every individual component's one-off state.
Illustrative v4 theme tokens
@import "tailwindcss";
@theme {
--color-brand-500: #0ea5e9;
--color-brand-700: #0369a1;
--font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
--radius-panel: 1.25rem;
}💡 This demonstrates the CSS-first token style used in Tailwind v4. Verify token namespaces and generated utility names against the current documentation for your exact version. The font still needs to be loaded or available locally.
Key Takeaways
- Tailwind v4 supports CSS-first theme customization.
- Define tokens for repeated design decisions.
- Confirm token syntax and generated utility names for the installed version.