This guide walks you through setting up a modern React project using Vite and integrating Tailwind CSS for clean, utility-first styling. You'll learn how to create a React app with Vite, install and configure Tailwind CSS, and run your development server — all in a few simple steps. By the end, you'll have a fast and efficient setup ready for building sleek, responsive user interfaces with ease. Perfect for both beginners and experienced developers looking to streamline their frontend workflow.

🚀 How to Set Up React with Tailwind CSS using Vite

Tailwind CSS is a popular utility-first CSS framework that works perfectly with modern frontend tools like React and Vite. Follow these simple steps to get your React project up and running with Tailwind CSS.

🛠 Step 1: Create a New React Project Using Vite

npm create vite@latest my-app

Choose React

Choose JavaScript or TypeScript based on your preference

Then navigate to the project directory:

cd my-app
npm install
code .

🎨 Step 2: Install Tailwind CSS and Required Dependencies

npm install -D tailwindcss postcss autoprefixer

Note: If you're getting errors with version 4 of Tailwind CSS, downgrade to version 3 using:

npm install -D tailwindcss@3 postcss autoprefixer

⚙️ Step 3: Initialize Tailwind Configuration

npx tailwindcss init -p

This will create two configuration files:

tailwind.config.js

postcss.config.js

📁 Step 4: Configure Tailwind in tailwind.config.js

Update the content array to include your source files:

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

💅 Step 5: Add Tailwind Directives to Your CSS

Open your main CSS file (usually src/index.css) and add the following lines:

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

🧪 Step 6: Start the Development Server

npm run dev

Example 

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>

       <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
        <h1 className="text-4xl font-bold text-blue-600">Tailwind is Working!</h1>
        <p className="mt-2 text-red-700">🎉 Styled using Tailwind CSS</p>
      </div>

    </>
  )
}

export default App

Open your browser at the provided localhost URL, and you should see your React app ready to use Tailwind classes!
✅ Conclusion

You're all set! You now have a blazing-fast React project powered by Vite and styled using Tailwind CSS. This setup allows for rapid development and clean, scalable styles.