How I migrated a large Next.js project from Tailwind CSS v3 to v4

Short summary

Tailwind CSS v4 eliminates tailwind.config.ts, moving design tokens to CSS @theme blocks that auto-generate utilities from custom properties. Breaking changes include opacity utilities (migrate to slash syntax like bg-blue-500/50), removed transform/filter stubs, and ring defaults shrinking from 3px to 1px. Migration delivered 6x faster CSS builds (~1.1s to 180ms) and 18% smaller output.

• •Config file removed; design tokens now defined in CSS @theme blocks
• •Breaking changes: opacity utilities (slash syntax), removed transform/filter stubs, ring defaults reduced to 1px
• •6x faster builds, 18% smaller CSS, simpler token management in pure CSS

Generated with AI, which can make mistakes.