Building Design Systems with Tailwind CSS v4

Tailwind CSS v4 rewrites the rules for design systems. The shift from JavaScript configuration to CSS-first means your design tokens live where they belong.

The key architectural change: the @theme directive. Instead of extending a JavaScript config, you define your design tokens directly in CSS custom properties.

For multi-brand systems, this is transformative. Each brand gets a token file that overrides the base theme via CSS custom properties. No build step needed.

The migration path from v3 is straightforward. Most utility classes are unchanged. The main effort is moving your tailwind.config.js values into CSS @theme blocks.