DEV Community

Cover image for Tailwind v4 is here! Learn how to upgrade your current project and explore the new features with Flowbite
Zoltán Szőgyényi
Zoltán Szőgyényi

Posted on • Originally published at flowbite.com

3 2 2 3 2

Tailwind v4 is here! Learn how to upgrade your current project and explore the new features with Flowbite

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.

Tailwind CSS v4 upgrade guide

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
Enter fullscreen mode Exit fullscreen mode

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': {},
  },
};
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

Lastly, compile the source files:

npx @tailwindcss/cli -i main.css -o styles.css
Enter fullscreen mode Exit fullscreen mode

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay