tailwind-patterns

Tailwind v4 uses CSS-first configuration via the @theme directive in your stylesheet. Define colors, spacing, and fonts as CSS variables like --color-primary directly in CSS, replacing the JavaScript config file entirely.

Add @container to a parent element, then use container breakpoints like @sm: or @md: on children. Named containers such as @container/card allow targeting specific contexts, making components responsive to their parent rather than the viewport.

Tailwind v4 replaces tailwind.config.js with CSS-based @theme configuration, uses the Rust-based Oxide engine for faster builds, supports native CSS nesting, and exposes all tokens as CSS variables. JIT mode is now always on.

Yes, Tailwind v4 supports class-based, media-based, and custom selector dark mode strategies. Use the class strategy with a .dark toggle for manual theme switchers, or media to follow system preferences automatically.

Use container queries for reusable components that must adapt to their parent width, such as cards in varying layouts. Use viewport breakpoints for page-level layouts where the overall screen size drives the design.

Heavy @apply usage duplicates utility output and undermines the utility-first model. Prefer extracting repeated class combinations into React or Vue components, reserving @apply for static styles without JavaScript logic.