How to Use Tailwind CSS v3 in a Vite Project

📌 **Prerequisites**: Node.js >= 18 and npm installed.

1️⃣ Create a new Vite project:

1npm create vite@latest my-app -- --template react-ts

2️⃣ Move into the project and install dependencies:

1cd my-app
2npm install

3️⃣ Install Tailwind CSS v3, PostCSS, and Autoprefixer:

1npm install -D tailwindcss@latest postcss autoprefixer

4️⃣ Initialize Tailwind CSS config files:

1npx tailwindcss init -p

5️⃣ Update your `tailwind.config.js` to enable content scanning:

1/** @type {import('tailwindcss').Config} */
2export default {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11};

6️⃣ Add Tailwind directives to your `src/index.css` file:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

7️⃣ Import the `index.css` file in your main `src/main.tsx` file:

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App.tsx';
4import './index.css';
5
6ReactDOM.createRoot(document.getElementById('root')!).render(
7  <React.StrictMode>
8    <App />
9  </React.StrictMode>
10);

8️⃣ Start the development server:

1npm run dev

🚀 Your Vite + Tailwind CSS v3 project is ready to build modern UIs!