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

Top comments (1)

Collapse
 
gianpaj profile image
Gianfranco •

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

Read next

alexandrecalaca profile image

How to undo a git pull command

Alexandre Calaça -

jetthoughts-dev profile image

Ruby on Rails 8: Simplifying Sharding with New Methods

JetThoughts Dev -

nenepo profile image

Optimizing React Re-Renders: Best Practices for Performance

Nenepo -

vikas76 profile image

Supervised, Unsupervised, and Reinforcement Learning: Choosing the Right Type for Your Project in 2025

Vikas76 -