HextaUIUpgrade Tailwind v3 to v4
Unofficial guide to upgrade Tailwind CSS from v3 to v4
Using the upgrade tool
If you'd like to upgrade a project from v3 to v4, you can use tailwind upgrade tool to do the vast majority of the heavy lifting for you:
That's it. For most projects the Tailwind upgrade tool will automatically upgrade your Tailwind CSS to v4 and make any necessary changes to your project.
The upgrade tool requires Node.js 20 or higher, so ensure your environment is updated before running it.
We recommend running the upgrade tool in a new branch, then carefully reviewing the diff and testing your project in the browser to make sure all of the changes look correct. You may need to tweak a few things by hand in complex projects, but the tool will save you a ton of time either way.
For more information about the upgrade tool and upgrading Tailwind CSS to v4, check out Official Tailwind CSS upgrade guide.
Last updated on