The Tailwind v4 Syntax That Keeps Catching Me Out

Tailwind v4 renamed a handful of utilities I type without thinking. None of them error — the class is simply not generated, so the element renders unstyled and you go hunting through devtools.

The ones that get me:

• bg-gradient-to-b is now `bg-linear-to-b`. Radial and conic follow the same pattern: bg-radial, bg-conic.
• Arbitrary CSS variables use parentheses: `bg-(--background)`, not bg-[--background].
• backdrop-blur-sm shifted down a step. The old sm is now `backdrop-blur-xs`, and the whole blur scale moved with it.
• shrink-0 and grow lost the flex- prefix.

Theme values live in CSS now instead of a config file:

@import "tailwindcss";

@theme {
  --font-manrope: var(--font-manrope);
  --color-brand: oklch(0.7 0.15 200);
}

Which is a genuine improvement — the design tokens and the stylesheet are finally the same file.

The upgrade tool catches most renames, but not classes built from template strings, and not anything you type after the migration. When a utility appears to do nothing in v4, assume it was renamed before assuming it was overridden.