Tailwind v4 CSS-first configuration

CSS-first configuration

Tailwind CSS v4 moved much of its customization model into CSS. Instead of starting every new project with a JavaScript configuration file, you can define theme variables and custom behavior using Tailwind's CSS directives.

The main directives

@theme defines design tokens that create utilities and variants. @utility defines custom utilities. @variant applies variants inside CSS. @custom-variant creates reusable custom variants. @source can explicitly include source locations.

Legacy compatibility

Tailwind v4 still provides compatibility mechanisms for older configurations, but new projects should prefer the current CSS-first approach unless there is a concrete migration reason.