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

#react #nextjs #javascript #tailwindcss

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

Step 2: Install Tailwind CSS v3

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

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:

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:

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:

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

Step 5: Update Your Global CSS File

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

@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!