How to integrate Tailwind Css Version 4 in React Vite Project

Struggling with setting up Tailwind CSS in your Vite + React project? Don’t worry! I’ve simplified the official Tailwind CSS docs into easy, digestible steps — no fluff, just action.

 

Reference: https://tailwindcss.com/docs/installation/using-vite

 

Let’s get you up and running with Tailwind in just 3 quick steps! 

---

Step 1: Install Tailwind CSS

Open your terminal inside your Vite project and run:

 npm install tailwindcss @tailwindcss/vite

This installs both Tailwind and the official Vite plugin.

---

Step 2: Configure vite.config.js

By default, your vite.config.js might look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'export default defineConfig({
plugins: [react()],
})

Now let’s tell Vite to use Tailwind CSS too!

Update it to:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})

✅ Boom! Tailwind is now connected to your build process.

---

Step 3: Import Tailwind in Your index.css

Navigate to your index.css file (make sure it’s not App.css) and clear everything. Then, add this line:

@import "tailwindcss";

That’s it! Clean and simple.

---

 Final Step: Run Your Project

Now restart your dev server with:

npm run dev

🧪 Test if Tailwind is Working

Open your App.jsx or any component and add this:

<h1 className="text-blue-500">Thank you for reading</h1>

If the text turns blue, Tailwind is officially working! 💙
If not, go back and double-check the above steps.