tailwind-patterns

Tailwind v4 theming uses the @theme directive to define design tokens as native CSS variables. This standardizes styling by exposing tokens directly in CSS, replacing legacy JavaScript configuration with a scalable architecture.

Use @container and container-scoped breakpoints to build responsive components. This creates context-independent UI that adapts layout to parent container size rather than viewport, ensuring components remain reusable across different layout contexts.

Dark mode operates through semantic design tokens defined in the @theme block. By shifting token values at the CSS variable level, dark mode strategies maintain consistency without relying on arbitrary utility class overrides.

Mixing legacy v3 practices and arbitrary values is discouraged under v4 guardrails. To reduce specificity issues and maintain performance, prefer token-based values from the @theme architecture over arbitrary styling.

Named containers are needed for complex container-query layouts with multiple nested @container scopes. They ensure responsive component behavior targets the correct parent context when components are reused across different layout boundaries.

Component extraction fails consistency when typography and animation conventions are not standardized through design tokens. Defining animation, transition, and typography values within the @theme block ensures reusable design system components remain unified.