code-architecture-tailwind-v4-best-practices

Tailwind CSS v4 uses a CSS-first configuration approach via the `@theme` directive, replacing the traditional JavaScript config file. This modern setup allows you to define your design tokens directly in your CSS.

You should choose between CVA and tailwind-variants based on your component complexity and variant count. A decision matrix helps determine the right abstraction strategy, guiding when to use pure utilities or abstraction libraries for optimal component architecture.

The main changes from Tailwind v3 to v4 involve shifting to a CSS-first configuration using `@theme` and adopting new component abstraction strategies. The transition focuses on modern CSS patterns and updated state management techniques for frontend styling.

You can implement stateful styling in Tailwind CSS by using data attributes. This approach allows you to manage component state directly within your CSS, providing a clean way to handle variants and interactive states without heavy JavaScript dependencies.

Deciding whether to use pure utilities or an abstraction library depends on your component's complexity and variant count. For simple components, pure utilities suffice, while complex components benefit from CVA or tailwind-variants for maintainable component architecture.