How to Downgrade to Tailwind CSS v3 in Next.js And React.js

Tailwind CSS Downgrading

The recent release of Tailwind CSS v4 has brought about significant changes.

One of the most noticeable differences is the absence of a tailwind.config.js file when creating a new Next.js application. This has left many developers confused, especially when trying to follow tutorials or videos that use Tailwind CSS v3.

While mentoring on Codementor, I have seen many developers struggling with this issue.

If you’re one of them, don’t worry! Here’s a step-by-step guide on how to use Tailwind CSS v3 in your Next.js and React.js project.

Why Downgrade to Tailwind CSS v3?

While Tailwind CSS v4 offers many exciting features, some developers might prefer to stick with v3 for various reasons, such as compatibility issues or familiarity with existing projects.

Whatever your reason, downgrading is straightforward.

Steps to Downgrade to Tailwind CSS v3

Step 1: Uninstall Tailwind CSS v4

First, you need to uninstall the installed Tailwind CSS v4. You can do this by running the following command in your terminal:

npm uninstall tailwindcss