Tailwind CSS v4+ Patterns

Quick Guide: v4 is configured in CSS, not JavaScript: @import "tailwindcss" replaces the three @tailwind directives, and @theme replaces tailwind.config.js — each variable in it generates utility classes and a real CSS custom property. Custom utilities come from @utility and custom variants from @custom-variant; the v3 plugin API and @layer utilities no longer reach the variant system. Source files are detected automatically, so there is no content array. Several defaults moved: borders are currentColor, ring is 1px, the shadow and radius scales shifted one step, and the important modifier trails (flex!).

Detailed Resources:

• examples/core.md — setup and source detection, responsive design, the three dark-mode strategies, state variants, @theme customisation
• examples/advanced.md — @utility, @custom-variant, container queries, 3D transforms, @starting-style, masks, class composition
• reference.md — @theme namespace table, v3-to-v4 differences, renamed utilities, browser support

Which path applies

• A new project — install the package for your bundler, add @import "tailwindcss", and put every token in @theme. Start at examples/core.md.
• A v3 project being upgraded — run npx @tailwindcss/upgrade first; it converts the config, the directives and most renamed utilities. The tables in reference.md cover what it leaves, and custom plugins have to become @utility and @custom-variant by hand — see examples/advanced.md.