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

2. Upgrade typography package

yarn upgrade @tailwindcss/typography --latest

3. Upgrade forms package

yarn upgrade @tailwindcss/forms --latest

4. Upgrade autoprefixer package

yarn upgrade autoprefixer --latest

5. Upgrade postcss package

yarn upgrade postcss --latest

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

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

require('@tailwindcss/aspect-ratio'),

• Search your codebase for the usage of legacy aspect ratio.
• Replace with the new aspect ratio attributes.

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: [...]
  ...
}

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 = {
  ...
}