tailwind-patterns

Tailwind v4 uses CSS-first configuration through the @theme directive in your stylesheet. Define tokens like --color-primary, --spacing-md, and --font-sans directly in CSS, and they become available as utility classes automatically.

Add @container to a parent element, then use container breakpoints like @sm:, @md:, or @lg: 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, and supports native CSS nesting and container queries. JIT mode is always on, and heavy @apply usage is discouraged.

Yes, Tailwind v4 supports class-based dark mode toggled with a .dark class, media-based mode following system preference, and a custom selector strategy for complex theming. Apply variants like dark:bg-zinc-900 and dark:text-zinc-100 to elements.

Extract a component when the same class combination appears three or more times, when complex state variants are involved, or when the element is part of a design system. Prefer React or Vue components over @apply for dynamic behavior.