Tailwind v4

Tailwind v4 is the styling layer that finally killed the duplicate token dance. It ingests CSS custom properties straight from your tokens.css file generated by Tokens Studio and maps utility classes directly to them. The class bg-brand-primary now resolves to var(--color-brand-primary) with zero JavaScript config. The same goes for text, border, ring, and every other property your design team touches. This shipped late 2024 and became the default for every serious design engineering team by 2026 because it removed the single point of drift that wrecked every previous setup. Linear switched in one afternoon and immediately cut their token update time from three days to thirty minutes. Vercel uses it to let preview toolbars inherit the exact same density and radius tokens that ship in their dashboard. The engine itself got faster JIT compilation, proper OKLCH color support, and smarter arbitrary value handling but those are side benefits. The main event is that your Figma Variables now survive all the way to the deployed Vercel preview without a human in the middle copying hex codes like it is still 2022.

Tailwind v4 is not a component library. That slot belongs to shadcn or your internal Radix primitives. It is not the old v3 workflow where you maintained a massive tailwind.config.js that duplicated every radius, spacing, and color from your design file. It is not a design tool, a replacement for proper CSS architecture, or a crutch for teams too lazy to set up tokens. If you skip the Tokens Studio step and feed it hand-written CSS variables you will still watch your system drift. It is also not the right choice for massive enterprise design systems that need ironclad cascade control and prefer authoring in pure CSS modules. Stripe still layers additional constraints on top rather than use raw Tailwind classes for their most complex surfaces.

Concrete example. In Q2 2025 the Linear team updated their command bar density for smaller screens. The designer changed three variables in Figma: --radius-md, --spacing-3, and --font-size-sm across light and dark modes. Tokens Studio exported the JSON contract. The build produced a fresh tokens.css. Every button, input, and tooltip using classes like rounded-md px-3 text-sm updated instantly across the entire codebase. No config file. No find and replace. The engineer opened Cursor, asked it to audit every usage of the old hardcoded values, accepted three suggestions, and shipped the PR. The Vercel preview link arrived in Linear with the exact visual change the designer intended. Six months earlier under Tailwind v3 the same update required edits to the config, the component library, three story files, and a manual QA pass that caught two missed instances. The v4 version took twenty seven minutes from Figma change to merged PR. The same pattern repeated at Vercel when they adjusted their sidebar branding tokens and at Anysphere while building the Cursor interface itself. In each case the design decision survived the full pipeline without translation errors.

Use Tailwind v4 when your team runs the full 2026 toolchain and wants one person to own a design decision from Figma Variables all the way to a shipped preview. It wins for teams of one to twenty engineers pairing it with shadcn, Ladle or Storybook, Cursor or Claude Code, and Vercel deploys. The speed gain is ridiculous once the token pipeline is clean. Do not use it when you have fifty plus engineers and a dedicated design systems squad that already maintains a heavily customized component library with strict lint rules and visual regression suites that would fight utility classes. Do not use it for marketing websites full of one off hero illustrations where semantic CSS beats utility bloat. Avoid it if your product leans on complex animation libraries that require specific selector control Tailwind cannot provide without heroic measures. Anthropic pairs it with Claude Code so the model suggests correct class strings from the token set. Small teams that ignore this advice and adopt the full enterprise stack at five people watch their velocity crater under configuration weight.

Tailwind v4 does not replace your designer but it finally stops punishing the entire team every time she changes a color.