Tailwind CSS Not Working in React Vite

Tailwind CSS Not Working in React Vite? Complete Guide to Fix It in v4

by

Are you stuck because Tailwind CSS not working in React Vite project, especially after version 4 update?
You’re not alone! Many developers are facing issues like:

✔︎ Tailwind text or background
✔︎ Colors not working
✔︎ Custom fonts not applying
✔︎ Tailwind CSS custom animations breaking
✔︎ Confusion with tailwind.config.js no longer working

In this blog post, I’ll walk you through the right way to install Tailwind CSS v4 in React Vite, set up custom fonts, colors, and even animations — all updated for the latest version. Let’s fix the most common Tailwind problems, one step at a time.

Table of Contents

🔧 Why Tailwind CSS v4 Breaks Your Old Setup:

Tailwind CSS Not Working in React Vite

Previously, we used to configure everything (fonts, colors, animations) inside tailwind.config.js. But in Tailwind CSS v4, the setup has completely changed. You now need to define your custom styles inside your CSS using @theme directives — not inside a JS config file.

Even ChatGPT or tutorials online might still suggest using the old tailwind.config.js method, but that won’t work anymore for v4

✔︎ How to Install Tailwind CSS v4 in React Vite (Step-by-Step)

1. Set Up React Vite Project:

First, we’ll use Vite, not Create React App.

				
					npm create vite@latest
  • Select React
  • Choose JavaScript Then:
				
					cd your-project-name

2. Install Tailwind CSS v4 with Vite Plugin:

				
					npm install tailwindcss @tailwindcss/vite

3. Configure Tailwind Plugin in vite.config.js:

No need for tailwind.config.js anymore!
Create or open your vite.config.js file and add:

				
					import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

4. Import Tailwind in your CSS:

In your index.css (or global CSS file), import Tailwind:

				
					@import "tailwindcss";

Make sure to clear any default boilerplate styles in App.css and App.jsx.

5. Run Your App:

				
					npm run dev

Try using a class like:

				
					<h1 className="text-4xl bg-violet-500 text-white">Hello WebX</h1>

If this works, your Tailwind setup is successful so far.

🟢 Fixing Tailwind CSS Colors Not Working (Text/BG)

Are you facing problems like:
  • text colour not working
  • bg colour not working
  • background colour not showing

That’s probably because you’re trying to use custom colors the old way.
You must use @theme inside CSS, not JS config anymore.

⚡️ How to Add Custom Fonts in Tailwind CSS v4:

Step 1: Import Font

Go to Google Fonts → Search for Poppins → Copy the @import URL and paste it in your index.css:

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

Step 2: Use @theme for Custom Font:

Add this to your CSS:

				
					@theme {
  --font-primary: 'Poppins', sans-serif;
}

Then apply it in JSX:

				
					<h1 className="font-primary">Hello WebX</h1>

✔︎ Now inspect it in the browser, you’ll see Poppins being used🔥!

🟢 Add Custom Color or Gradient in Tailwind CSS v4

Suppose you want to use a custom gradient or color.
In index.css, use:

				
					@theme {
  --color-primary: #6C63FF;
}

Apply it like:

				
					<h1 className="text-primary bg-primary">Gradient Ready!</h1>

🖥️ Tailwind CSS Custom Animation Not Working? Here's the Fix:

Yes, tailwind.config.js won’t help anymore.
You now define custom animations like this:

				
					@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}

Use it like:

				
					<h1 className="animate-wiggle">I'm Wiggling!</h1>

🔥 Bonus: How to Install Tailwind in VS Code:

  • Open VS Code

  • Install these extensions:

    • Tailwind CSS IntelliSense

    • PostCSS Language Support

  • Enable auto-complete and hover preview for Tailwind classes

  • Optional: Add Tailwind snippets extension for faster development

🔍 Common Tailwind CSS v4 Issues and Fixes:

IssueReasonSolution
Tailwind classes not workingWrong import / missing pluginUse @import "tailwindcss" and configure vite.config.js
Custom fonts not applyingNot using @themeDefine fonts in CSS with --font-*
Colors not workingOld config methodUse @theme and CSS variables
Animations not workingNo keyframes definedUse @theme + @keyframes
Background color not workingWrong class or missing valueUse correct bg-* or bg-primary defined via @theme

Conclusion:

  • If you were struggling with Tailwind CSS not working in React Vite, especially with version 4 — this guide should clear everything up:

    • You learned how to install Tailwind CSS v4 in React Vite

    • Solved font, color, background, and animation issues

    • Discovered that tailwind.config.js is no longer needed

    • Fixed Tailwind in VS Code and modern projects

    If this helped, do leave a comment or mail me your questions. I’ll see you in the next video.

    Happy Coding! 🎉

🙋‍♂️ FAQ(Tailwind css not working in react vite):

💡 How to setup Tailwind CSS in React using Vite?

To set up Tailwind CSS in a React + Vite project (especially in v4), follow these steps:

  1. Create a new Vite + React app using:

  2. npm create vite@latest
  3. Install Tailwind and the Vite plugin:
  4. npm install tailwindcss @tailwindcss/vite
  5. In your vite.config.js, add:

  6. import tailwindcss from ‘@tailwindcss/vite’

    export default {
    plugins: [tailwindcss()],
    }

  7. In index.css, import Tailwind:
  8. @import “tailwindcss”;
  9. Run your app using:
  10. npm run de
  11. So your problem will solve (tailwind css not working in react vite)

This usually happens due to one of the following:

  • You haven’t correctly imported Tailwind in your CSS file

  • Your Vite plugin for Tailwind is missing or misconfigured

  • You’re using old setup instructions meant for v2 or v3

  • You’re trying to use custom styles without @theme (required in Tailwind v4)

  • You forgot to restart the dev server after changes

✔︎ Fix: Follow the updated Tailwind CSS v4 steps outlined in this guide now it will solve your problem that tailwind css not working in react vite.

To enable Tailwind CSS in any React project:

  • Use Vite (recommended for modern builds)

  • Install tailwindcss and include it in your global CSS via @import

  • Make sure your dev server is running (npm run dev)

  • Use Tailwind utility classes directly in your JSX

If you’re using Create React App (CRA), the setup is different and requires postcss.config.js and manual configuration — but Vite is far simpler and faster.
in this guide now it will solve your problem that tailwind css not working in react vite.

Your Tailwind CSS might not be applying because:

  • You’re using outdated setup instructions from v2 or v3

  • The plugin is not registered in your vite.config.js

  • Custom classes like text-primary, bg-brand aren’t defined using @theme in v4

  • You’ve missed importing Tailwind in your global CSS

✔︎  Make sure to follow Tailwind v4 documentation and avoid relying on older tailwind.config.js.

in this guide now it will solve your problem that tailwind css not working in react vite.

Use Tailwind CSS if:

  • You want to build UIs fast with utility-first classes

  • You prefer not to switch between CSS and JSX

  • You like customization and design systems

Avoid Tailwind CSS if:

  • You prefer semantic class names over utility classes

  • You’re working on legacy projects with different styling requirements

  • You want to avoid writing styles inside classNames

 Tailwind is incredibly powerful — but it may not suit everyone’s workflow.
  Evaluate based on project scope and team preference.now it will solve your problem that tailwind css not working in react vite.

🌍 External Resources You May Find Helpful

📚 Related Resources:

© WebX Learner | All rights reserved

Privacy Policy | Term & Conditions | About Us | Contact Us