Implement Modern Tailwind CSS Patterns

This skill provides a structured reference for Tailwind CSS v4's CSS-first architecture, covering the shift from tailwind.config.js to the @theme directive, the Rust-based Oxide engine, and always-on JIT compilation. It documents how to define design tokens directly in CSS using --color-*, --spacing-*, and --font-* variables, and lays out the difference between extending Tailwind's default scale versus overriding it entirely with semantic tokens. It also covers native container queries (@container, @sm:/@md: on children) as a v4-first alternative to viewport-based breakpoints for component-level responsiveness.

Beyond configuration, it catalogs dark mode strategies (class, media, selector), common flexbox and grid layout patterns (including asymmetric "Bento" grids preferred over symmetric 3-column layouts), the OKLCH color model and its three-tier token architecture (primitive/semantic/component), a typography scale, and built-in animation/transition utility classes.

Use this skill when setting up or auditing a Tailwind v4 project: writing the @theme block, deciding whether a responsive concern belongs to viewport breakpoints or container queries, picking a dark mode strategy, or choosing when a repeated class combination should be extracted into a component versus handled with @apply. It also works as an anti-pattern checklist - flagging arbitrary values, !important, inline style= attributes, mixed v3/v4 configuration, and duplicated long class lists.

It is not a replacement for Tailwind's official documentation on individual utility class names, and it does not cover Tailwind v3 configuration in depth beyond noting what changed. Projects still on Tailwind v3 with a JavaScript config file should treat the v4-specific sections (CSS-first theming, Oxide engine, native container queries) as forward-looking migration guidance, not as applicable today.

Input is a Tailwind CSS v4 project (or one being migrated to v4) with a specific styling question - theme configuration, responsive strategy, dark mode setup, or component extraction. Output is a concrete pattern: a CSS snippet, a table-driven decision (e.g. breakpoint vs container query), or a checklist item from the anti-patterns/performance sections.

# Example @theme block (CSS, not shell, but shown verbatim from source)
@theme {
  --color-primary: oklch(0.7 0.15 250);
  --spacing-md: 1rem;
  --font-sans: 'Inter', system-ui, sans-serif;
}

Applies directly within any Tailwind CSS v4 build pipeline (Oxide engine, native CSS nesting) and is framework-agnostic - the same patterns apply to React, Vue, or plain HTML projects using Tailwind utility classes.

Frontend developers and designers working with Tailwind CSS v4 who need a fast lookup for CSS-first configuration syntax, container query usage, dark mode wiring, or a gut-check against common Tailwind anti-patterns, rather than a full tutorial.