When Tailwind v4 was announced, what caught my attention most was moving configuration out of a JavaScript file and into CSS. It felt odd at first, but defining theme values inside an @theme block turned out to be genuinely more useful, since it automatically exposes design tokens as CSS variables — I can now use the same color value both as a Tailwind class and as plain CSS via var().
While migrating jhun.tech's existing components, the part that took the most adjustment was automatic content scanning; no longer having to manually maintain the content array in the old tailwind.config.js was a small but real relief.
Changes to the color opacity syntax (canonical shorthands like bg-white/3 instead of bg-white/[0.03]) required a small but accumulating cleanup that I mostly noticed through lint warnings. For anyone who wants to automate this, the editor extension's suggestions are quite reliable.
Arbitrary property support (e.g. [--my-var:value]) — letting you define theme variables directly inside a class and swap them with the dark: variant — let me move some problems I used to solve with JavaScript-side theme detection entirely into the CSS layer, meaning less code and less hydration risk.
In the end, migrating to v4 wasn't a 'big rewrite' — it was a few days of cleanup.
{ }