How can you upgrade your old Tailwind CSS projects from version 3 to version 4?

Tailwind CSS v4

How can you upgrade your old Tailwind CSS projects from version 3 to version 4?

Details: Steps to Upgrade Tailwind CSS from Version 3 to Version 4.

To upgrade your old Tailwind CSS project from version 3x to version 4x, you need to run the following command in your project.

npx @tailwindcss/upgrade

If everything is fine, you see the following output in the terminal.

npx @tailwindcss/upgrade
≈ tailwindcss v4.1.8

│ Searching for CSS files in the current directory and its subdirectories… 

│ Migrating stylesheets… 

│ ↳ Migrated stylesheet: `./app/globals.css` 

│ Updating dependencies… 

│ ↳ Updated package: `tailwindcss` 

│ Migrating templates… 

│ ↳ Migrated templates for: `./app/globals.css` 

│ Verify the changes and commit them to your repository. 

Your project has been successfully upgraded to Tailwind CSS v4. You can verify which Tailwind CSS class changes were made in each file using git.

Check which Tailwind CSS class changes are located in each file.

Currently, your project does not work; you need to make some minor changes to your project so it works.