Upgrading Tailwind v2 to v3

By now, you all know my opinion on Tailwind CSS. And I'm still loving it.

Recently Tailwind launched V3 of their popular CSS framework, so let's look at how we can upgrade from V2 to V3.

What's new

A lot of things have been added to Tailwind V3. Let's take a look at some of the new stuff.

Before, the colors of Tailwind were a bit limited. Of course, you could extend, but now they support every color out of the box!

You can find the complete new color palette here.

They also added the scroll snap API classes, making it super easy to implement scroll snap behavior!

Click here for a detailed article on Tailwind CSS scroll snap

Native form control styling also got a massive boost, making it easier to style checkboxes, form input, and more.
We'll probably dedicate a whole article to this one day.

The aspect-ratio is now built into Tailwind, and I will go in and modify the article to reflect the new case.

We also got all kinds of new underline decorators, which is pretty cool to make fancy underlines possible.

And a bunch more features you'll defiantly need to find out by playing with it. 🥳

Upgrading Tailwind V2 to V3

For the actual upgrading, we have first to update our packages.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

For instance, if you are using any plugins like the tailwindcss/typography plugin, we also have to update all of those.

You can again use a similar approach for updating this:

npm install -D @tailwindcss/typography@latest

Once all of these packages are updated, it's time to move on to the config part.

Just in time, all the time

Tailwind JIT mode is now on by default, so we can safely remove it from our tailwind.config.js file.

Remove the following mode: 'jit'

module.exports = {
  mode: 'jit',
  // Other stuff
};

Purge change

Tailwind heavily relied on PurgeCSS. However, this is no longer the case as they rolled out another system.

This made them rename the purge option to content.

Also, make this change in your tailwind.config.js file.

// Old
module.exports = {
  purge: [],
  // Other stuff
};

// New
module.exports = {
  content: [],
  // Other stuff
};

If you are interested in reading up how this works and which configuration you can use, check out the Tailwind docs on content.

Dark mode changes

By default, tailwind changed the dark mode to enable the media strategy.
This means we no longer have to define it as that strategy.

If you had it set as false, you can safely remove that.

// Safely remove darkMode
module.exports = {
  darkMode: 'media',
  // Other stuff
};

// Safely remove darkMode
module.exports = {
  darkMode: false,
  // Other stuff
};

Variants are no longer needed

This is pretty cool as Tailwind now supports all variants by default, meaning we no longer have to define them explicitly.

From your tailwind.config.js you can safely remove the whole variants section.

// Safely remove variants
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  // Other stuff
};

On the same note, this is also valid for any custom @variants you might have defined.

If you still need custom CSS, you can use the @layer option.

Classnames changes and removals

In Tailwind V3, we can safely remove transform, filter, and backdrop-filter classes. These are now applied whenever you use a transformation or filter.

Note: It does not harm your code by leaving them, but it's recommended to remove them

As for the changes, it's good to mention that the old ones still work, but again recommend updating them.

overflow-clip is now text-clip, and overflow-ellipsis is now text-ellipsis.

<!-- old -->
<div class="overflow-clip overflow-ellipsis"></div>

<!-- new -->
<div class="text-clip text-ellipsis"></div>

flex-shrink, and flex-grow no longer need the flex prefix. So you can use them without the front part.

<!-- old -->
<div class="flex-grow-0 flex-shrink"></div>

<!-- new -->
<div class="grow-0 shrink"></div>

If you are using outline-black or outline-white, you have to add extra classes to make this work.

<!-- old -->
<div class="outline-black"></div>

<!-- new -->
<div class="outline-black outline-2 outline-dotted outline-offset-2"></div>

decoration-clone, and decoration-slice should now be prefixed with box-.

<!-- old -->
<div class="decoration-clone decoration-slice"></div>

<!-- new -->
<div class="box-decoration-clone box-decoration-slice"></div>

And there you go, you fully migrated to Tailwind V3.
It was quite a straightforward process for my projects, and super happy with how easy the Tailwind team made this transition.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter