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!
Thank you for this post, I was going insane without tailwind.config file. Created account just for this comment.