TailwindCSS Not Working with Vite + React: Fix Guide

If you’re struggling to make TailwindCSS work with your Vite + React project, you’re not alone. This guide provides common troubleshooting steps and solutions to resolve setup issues.

Step-by-Step Fix

1. Install TailwindCSS and PostCSS Dependencies

Ensure you’ve installed the necessary dependencies. Run the following command:

npm install -D tailwindcss postcss autoprefixer

Then, initialize TailwindCSS with:

npx tailwindcss init -p

This will create two configuration files:

• tailwind.config.js
• postcss.config.js

2. Verify Your Configuration Files

tailwind.config.js

Ensure the content property includes all your relevant files:

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

postcss.config.js

Ensure your PostCSS configuration looks like this:

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

3. Add TailwindCSS Directives to Your CSS

Create or open your main CSS file (e.g., src/index.css) and add the TailwindCSS directives:

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

4. Check Your Vite Configuration

For advanced cases, you may need to specify PostCSS plugins in vite.config.js. Update your vite.config.js like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
})

5. Confirm CSS File Import in main.jsx

Ensure your CSS file is imported in src/main.jsx:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

6. Check for Conflicts or Errors

If TailwindCSS is still not working:

• Verify that there are no syntax errors in your configuration files.
• Check for conflicting PostCSS plugins in your package.json file.

Run the following command to reinstall dependencies:

rm -rf node_modules package-lock.json
npm install

7. Debug Using the Tailwind CLI

You can debug your TailwindCSS setup using the CLI. Run:

npx tailwindcss build ./src/index.css -o output.css

Open output.css and ensure it contains the generated TailwindCSS classes.

Common Errors and Fixes

1. Unmet Peer Dependency for PostCSS

If you see a warning about postcss:

warning "[email protected]" has unmet peer dependency "postcss@^8.0.9".

Run:

npm install postcss@latest

2. CSS Classes Not Applying

• Ensure content paths in tailwind.config.js are correct.
• Verify your CSS file is imported in your React entry point.

3. No Styles in Production Build

Add the following to vite.config.js:

css: {
  postcss: {
    plugins: [require('tailwindcss'), require('autoprefixer')],
  },
},

FAQ

1. Why isn’t TailwindCSS working in my Vite + React project?

Common reasons include missing dependencies, incorrect configuration files, or improperly imported CSS files. Follow the steps above to fix these issues.

2. Do I need to use PostCSS with TailwindCSS?

Yes, PostCSS is required for TailwindCSS to process its utilities and classes. It’s automatically included when you run npx tailwindcss init -p.

3. Can I use TailwindCSS with TypeScript?

Yes, TailwindCSS works seamlessly with TypeScript. Just ensure your content paths include TypeScript files (*.ts and *.tsx).