tailwind-patterns

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

Add `@container` to the parent element, then use container breakpoints like `@sm:`, `@md:`, and `@lg:` on children. Use named containers like `@container/card` when you need specificity for nested component contexts.

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

Use viewport breakpoints (`md:`, `lg:`) for page-level layouts and container queries (`@md:`) for reusable components that must adapt to their parent width. Container queries make components context-independent and portable across layouts.

Avoid heavy `@apply` usage in v4; prefer extracting repeated class combinations into React or Vue components instead. Reserve `@apply` for static styles with no JavaScript logic, and use design tokens for reusable values.