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.
Log in to leave a comment.
Set up Claude Code as an automated reviewer in your CI pipeline — on every pull request, it reads the diff, checks for bugs, security issues, missing tests, and convention violations, then posts its findings as a PR comment. Your human reviewers get a head start because the obvious issues are already flagged before they look.
Before deploying, tell Claude to read your project — migrations, environment variables, queue workers, scheduled tasks, caching, third-party integrations — and generate a deployment checklist that's specific to your app. Not a generic "did you run migrations?" list, but one that knows YOUR infrastructure and catches the things YOUR deploy can break.
Instead of writing a README from memory or copying a template, tell Claude to read your project and generate one that's actually accurate — real setup instructions from your config, real architecture from your directory structure, real API examples from your routes, and real prerequisites from your dependency files.