# Lost in Transition: How to Downgrade to Tailwind CSS v3 in Next.js And React.js

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](https://www.codementor.io/@myogeshchavan97), 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:

```javascript
npm uninstall tailwindcss
```

### **Step 2: Install Tailwind CSS v3**

Next, install Tailwind CSS v3 along with other necessary dependencies using the following command:

```javascript
npm install -D tailwindcss@3.4.17 postcss autoprefixer
```

### **Step 3: Create a Tailwind Config File**

Now, create a `tailwind.config.js` file by executing this command:

```javascript
npx tailwindcss init -p
```

### **Step 4: Configure the Content Array**

Open the newly created `tailwind.config.js` file and update the `content` array to include your project's paths.

* **For Next.js Projects:**  
    Replace the existing content with the following code:
    

```javascript
content: [
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
],
```

* **For Vite + React.js Projects:**  
    Use the following configuration instead:
    

```javascript
content: [
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
],
```

### **Step 5: Update Your Global CSS File**

Finally, add the following lines to your main `global.css/index.css` file:

```javascript
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## **You're Done!**

By following these steps, you should now have Tailwind CSS v3 up and running in your Next.js and React.js project.

This setup will allow you to continue using the features and configurations you're familiar with from v3, making it easier to follow older tutorials or maintain existing projects.

Happy coding!

### **Connect With Me**

* 🔥 [**Master React In 20 Days Training Application Source Code**](https://courses.yogeshchavan.dev/master-react-in-20-days-training-application-source-code)
    
* 🚀 [**Master Next.js 15: From Basics to Advanced**](https://courses.yogeshchavan.dev/mastering-next-js-15-from-basics-to-advanced)
    
* 📹 [**Connect With Me**](https://www.linkedin.com/in/yogesh-chavan97/)
    
* 🔗 [**GitHub**](https://github.com/myogeshchavan97)