DEV Community: Harshit Singh

How to Fix Tailwind CSS Not Working in Next.js

Harshit Singh — Thu, 19 Sep 2024 13:03:05 +0000

If you're encountering issues where Tailwind CSS isn't applying styles in your Next.js project, this guide will walk you through how to resolve the issue. We'll go step by step, covering installation, troubleshooting, and potential fixes.

Step 1: Delete .next Folder, node_modules, and package-lock.json

Before starting, if Tailwind CSS isn't working properly even after installation, a clean setup might solve the issue.

Delete the following files and folders:

next folder (stores Next.js build files)
node_modules folder (stores project dependencies)
package-lock.json file (ensures consistent installations rm -rf .next node_modules package-lock.json ### Step 2: Reinstall Dependencies Once you've deleted the above files, you need to reinstall the project dependencies to ensure a clean installation.

Run the following command to reinstall node_modules and regenerate package-lock.json

npm install npm run dev

Step 3: Verify Tailwind CSS Setup

Make sure you’ve installed Tailwind CSS correctly by following these steps

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
Initialize Tailwind:

npx tailwindcss init -p
This creates a tailwind.config.js and postcss.config.js file.

Configure your tailwind.config.js: Ensure the content paths are correctly set to include your project files:

Add it to tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Add Tailwind to your CSS: In the globals.css file (usually located in styles), add the following:

css use in global.css or index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Common Issues and Fixes

Even after following the above steps, you might still face issues. Here are some common problems and fixes:
PurgeCSS Issue: Ensure PurgeCSS is not removing your styles during production builds. Check your tailwind.config.js for the correct paths.
Check for conflicting CSS: If you’re using other CSS frameworks or custom styles, they may conflict with Tailwind. Make sure Tailwind is being properly loaded by checking for style overrides.
Development Mode: If Tailwind styles are not updating, try clearing your browser cache or restarting the development server.