DEV Community

thomasvanholder
thomasvanholder

Posted on

How to upgrade Tailwind 2 to Tailwind 3

#tailwindcss #tutorial #webdev

In package.json file, verify your current installed tailwind version. Find tailwind's complete upgrade guide, including all minor changes here.

This tutorial has as starting point:

  • Tailwind 2.2.16
  1. Upgrade tailwind
  2. Upgrade typography package
  3. Upgrade forms package
  4. Upgrade autoprefixer package
  5. Upgrade postcss package
  6. Remove aspect-ratio package
  7. Replace purge option with content
  8. Remove dark mode config

1. Upgrade tailwind 

yarn upgrade tailwindcss --latest
Enter fullscreen mode Exit fullscreen mode

2. Upgrade typography package 

yarn upgrade @tailwindcss/typography --latest
Enter fullscreen mode Exit fullscreen mode

3. Upgrade forms package 

yarn upgrade @tailwindcss/forms --latest
Enter fullscreen mode Exit fullscreen mode

4. Upgrade autoprefixer package 

yarn upgrade autoprefixer --latest
Enter fullscreen mode Exit fullscreen mode

5. Upgrade postcss package 

yarn upgrade postcss --latest
Enter fullscreen mode Exit fullscreen mode

6. Remove aspect-ratio package

Tailwind 3 comes with native aspect-ratio (7:42). This implies that the package.json can be slimmed down by removing the aspect ratio package if you had it installed.

yarn remove @tailwindcss/aspect-ratio
Enter fullscreen mode Exit fullscreen mode

In the tailwind.config.js file, remove aspect-ratio from the plugins.

require('@tailwindcss/aspect-ratio'),
Enter fullscreen mode Exit fullscreen mode

7. Replace purge option with content

If after compiling the CSS, you see the warning message:
The "purge"/"content" options have changed in Tailwind CSS v3.0.

Replace the purge option in tailwind.config.js with content as mentioned here.

// old
module.exports = {
  purge: [...]
  ...
}

//new
module.exports = {
  content: [...]
  ...
}
Enter fullscreen mode Exit fullscreen mode

8. Remove dark mode config

In the tailwind.config.js file, remove the dark mode setting if it's value is set to false.

// old
module.exports = {
  darkMode: false,
  ...
}

//new
module.exports = {
  ...
}
Enter fullscreen mode Exit fullscreen mode

Oldest comments (1)

Collapse
 
gianpaj profile image
Gianfranco •

is there a codemode for this and all other changes? tailwindcss.com/docs/upgrade-guide

Read next

mince profile image

I MADE MY APP ! 🙀WITH JUST $0

Mince -

prakirth profile image

Document Object Model (DOM) : One Byte Explainer

Prakirth Govardhanam -

mrkandreev profile image

How to create Unit tests for code design?

Mark Andreev -

pixelgig profile image

Learning Cyber Security Day 4 - Integrating Encryption in Your Code🔐

Gaurav Chaudhary -