Install Tailwind CSS v4 in React vite

Tailwind v4 simplifies setup dramatically compared to v3 — no PostCSS config, no npx tailwindcss init, no @tailwind directives, and often no tailwind.config.js needed at first.

Step-by-step:

Install the packages

   npm install -D tailwindcss @tailwindcss/vite

Update vite.config.ts (or .js)

Add the official Vite plugin. Keep the React plugin too:

vite.config.ts

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

• Update your main CSS file

Usually src/index.css or src/App.css. Replace everything with just this single line:

@import "tailwindcss";

(You can add your own custom CSS below it later.)

• Make sure the CSS is imported

In src/main.tsx (or .jsx):

import './index.css'   // ← this line should already exist

• Restart the dev server

npm run dev

• Quick test in App.tsx:

function App() {
     return (
       <div className="min-h-screen bg-gray-950 text-white flex items-center justify-center">
         <div className="text-center">
           <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
             Tailwind v4 + Vite + React
           </h1>
           <p className="mt-4 text-lg text-gray-400">It works! 🚀</p>
         </div>
       </div>
     )
}

Optional: Adding a config later

If you need custom colors, fonts, etc., create tailwind.config.js in the root:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        primary: 'oklch(70% 0.2 240)',
      },
    },
  },
}

Tailwind v4 will pick it up automatically.