A few days ago the developers from Tailwind officially announced the v4-beta which means that you can now officially start playing around with the new version of Tailwind which brings a couple of new features, better performance, and a small switch of the CSS-in-JS paradigm to native CSS layers and variables.
But don't worry, Tailwind is still Tailwind and all of the utility classes that we all love will still work and the way you work with them remains unchanged – configuration of colors, fonts and other theme related settings will now be recommended to be added as CSS variables which is a good change in my opinion.
Here's a list of the highlighted features and changes:
- 3x better performance compilation time
- deprecating tailwind.config.js in favor of CSS configuration
- better source detection (no more content paths in config)
- a couple of new utility classes and renaming others
I suggest you take a look at the official Tailwind v4-beta guide and you'll learn about the new features and changes from the source directly. Going onwards in this article I'll show you how to upgrade your current Flowbite project which most likely uses the current stable version of Tailwind CSS which is v3.x.
Upgrading to Tailwind v4-beta
For the sake of simplicity we're going to use as an example one of our open-source projects that uses Flowbite and Tailwind and that is our admin dashboard from GitHub which I definitely recommend you using for your projects.
The first thing you need to do is open up the terminal and using the next tag of both the Tailwind CSS and Flowbite packages using NPM:
npm install tailwindcss@next @tailwindcss/postcss@next flowbite@next
Next thing is that you have to update your postcss.config.js file and remove the old plugins which are no longer needed such as the autoprefixer:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
After that you should go to your main CSS file where previously you have imported the Tailwind directives and you should delete those and only import one unique Tailwind module:
@import "tailwindcss";
The easiest way to upgrade a Tailwind v3 project to v4 is to simply just import the configuration file called tailwind.config.js inside your main CSS file:
@import "tailwindcss";
/* add this to copy the configuration settings from your project */
@config "./../tailwind.config.js";
Lastly, compile the source files:
npx @tailwindcss/cli -i main.css -o styles.css
That's it! Hopefully you had a pixel-perfect upgrade for your project as we did.
The full upgrade guide for Flowbite from Tailwind v3 to v4 can also be checked on the Flowbite quickstart guide from our official documentation website.
Please remember that this is still in beta version so it's subject to changes and that is why we still recommend using the stable v3.x of Tailwind CSS until further notice – have fun using the new features!
Top comments (0)