Migrate Your Tailwind CSS v2 Classes to v4 with Claude

Tailwind v4 is a near-complete rewrite with breaking changes across utility names, config structure, and CSS variable conventions — a perfect job for Claude.

Ask Claude to handle the migration across your whole project at once:

claude "Migrate all Tailwind CSS classes in src/ from v2 to v4. Key changes: shadow-sm → shadow-xs, ring-offset-* is removed, flex-shrink-* → shrink-*, overflow-ellipsis → text-ellipsis, and decoration-clone/slice → box-decoration-clone/slice. Update every .tsx, .html, and .vue file."

For the config file, the change is more fundamental — tailwind.config.js is replaced by CSS-first configuration:

claude "Read tailwind.config.js and convert it to a v4 CSS theme block in src/styles/app.css. Map custom colours, font families, spacing values, and breakpoints to @theme variables. Preserve all custom values."

Claude can also handle the new @utility custom utilities syntax and update any PostCSS config:

claude "Update postcss.config.js for Tailwind v4 and replace any @apply directives in our CSS files that use renamed utilities."

If you have a design token system that feeds into Tailwind, Claude can bridge that too:

claude "Read design-tokens.json and generate the @theme block for our Tailwind v4 config, mapping colour, spacing, and typography tokens to the correct CSS variable names."

Tailwind v4 migrations are mechanical and tedious — exactly the kind of work Claude handles well so you don't have to.