DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

thomasvanholder
thomasvanholder

Posted on

How to upgrade Tailwind 2 to Tailwind 3

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

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.