Fix: Tailwind CSS Not Working After Installation

If you installed Tailwind CSS but it’s not working, follow these troubleshooting steps to fix the issue.

✅ Solution 1: Check Tailwind Installation

Ensure Tailwind CSS, PostCSS, and Autoprefixer are installed correctly.

Install Dependencies

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind Configuration

npx tailwindcss init -p

This creates tailwind.config.js and postcss.config.js, required for proper setup.

✅ Solution 2: Verify `tailwind.config.js` Content Paths

Tailwind scans files specified in the content array. If paths are incorrect, classes won’t work.

Correct Configuration Example:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ensure:

./src/**/*.{html,js,jsx,ts,tsx} is included.
If using a framework like Next.js, add ./pages/**/*.{js,ts,jsx,tsx}.

✅ Solution 3: Ensure Tailwind Directives are in CSS File

Check that input.css (or style.css) contains the Tailwind directives:

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

If missing, Tailwind won’t generate any styles.

✅ Solution 4: Use `@import` Instead of `@tailwind` (For Some Versions)

If Tailwind classes aren’t applied, try:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

This method works better in some versions or frameworks.

✅ Solution 5: Verify Tailwind Build Process

Ensure you run the correct Tailwind build command.

Development Mode (Watch for Changes)

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Production Mode (Optimized Output)

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Ensure the output.css is linked correctly in your HTML:

<link rel="stylesheet" href="./output.css" />

✅ Solution 6: Restart Your Development Server

After modifying tailwind.config.js, restart the server:

npm run dev

Or if using Vite:

npm run build && npm run preview

✅ Solution 7: Clear Cache and Restart Editor

Sometimes, restarting VSCode or clearing the cache helps.

rm -rf .cache .next node_modules/.cache
npm run dev

🔥 Final Checklist:

✅ Tailwind CSS is installed correctly. ✅ tailwind.config.js has proper content paths. ✅ Tailwind directives exist in your CSS file. ✅ Correct build command is used. ✅ The development server is restarted after changes. ✅ CSS file is linked correctly in HTML.

FAQs

1. Why is Tailwind CSS not working?

Incorrect file paths in tailwind.config.js
Missing Tailwind directives in CSS
Build process not running properly

2. How do I check if Tailwind is working?

Add a simple Tailwind class to your HTML:

<div class="bg-blue-500 text-white">Test Tailwind</div>

If the background is blue, Tailwind is working!

3. Does Tailwind work with React or Next.js?

Yes! Make sure you include Tailwind classes inside JSX:

export default function Home() {
  return <div className="bg-blue-600 p-5 text-white">Hello, Tailwind!</div>
}