Tailwind CSS has just dropped its fourth major version, and it’s bringing some exciting changes to the utility-first CSS framework that many of us have come to rely on. As someone who’s been using Tailwind across several projects, I thought I’d share my experience with the update and what it means for developers like us.
CSS with Tailwind
Let’s be clear: Tailwind is not a replacement for understanding CSS. Rather, it’s a powerful abstraction that makes working with CSS more efficient. For someone like me who doesn’t identify as a designer first, Tailwind helps bridge that gap, allowing me to build visually appealing interfaces without getting lost in a sea of custom CSS files.1
One of the reasons I’ve stuck with Tailwind in my Hugo projects is the excellent built-in support that Hugo provides. This integration has always made the development process smoother, and with v4, it’s gotten even better.
What’s new
The headline feature of Tailwind v4 is how it fundamentally changes the way CSS is compiled from utility classes. The new approach is significantly more flexible, generating styles on demand as you use them in your HTML. This means faster build times and smaller CSS bundles - who doesn’t want that?2 According to the official release notes, full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster!
There are also numerous quality of life improvements for the development process, including better error messages and more intuitive behaviour for certain utilities. The developer experience has clearly been a priority for this release, with v4.1 already adding even more features like text shadows and masks.
For Hugo users like myself, there’s good news: Hugo supports Tailwind v4 through its built-in css.TailwindCSS function. What’s particularly nice about this update is that my setup now requires far fewer dependencies. I’ve been able to eliminate several packages like PostCSS and instead use the Tailwind CLI directly, resulting in a cleaner, more maintainable build process.
Updating process
So far, I’ve managed to update two of my projects to Tailwind v4:
My CV page (built with Next.js) — the transition was relatively smooth, though I did have to adjust some custom plugin configurations.
My business card website — being a simpler project with lower complexity, this update was straightforward and completed in under an hour.
My blog (the one you’re reading now) is still running on the previous version. I plan to update it eventually, but as it has more complex styling needs and custom components, I’m taking my time to ensure everything transitions smoothly3. If you’re looking to update your Hugo site, there are some excellent resources available to help with the process.
many developers echo this sentiment. As this Reddit discussion points out, “The real advantage lies in the fact that it saves you time by encapsulating classes and allowing you to manipulate hundreds of styling options.” ↩︎
Remember when we used to ship entire CSS frameworks to production just to use a handful of styles? Those days feel increasingly distant. Material Tailwind highlights this as one of the key benefits: “Reduced CSS File Size: By avoiding custom CSS for each element, Tailwind can help keep your stylesheet lean and focused.” ↩︎
If you’re curious about my update process or run into issues with your Tailwind v4 migration, feel free to reach out. I’ll probably write a blog post about the process once I’m done. ↩︎