How to Install Tailwind CSS in React + Vite (2026 Guide)

If you've followed a Tailwind CSS + Vite tutorial recently and ended up with a working dev server but none of your utility classes actually applying anything, you're not doing anything wrong — you're almost certainly following outdated instructions. Tailwind CSS v4 changed how it integrates with Vite, and a large share of the tutorials, Stack Overflow answers, and even AI-generated instructions still floating around describe the old v3 setup, which no longer matches what a fresh Tailwind install expects.

This walks through the current, correct way to install Tailwind CSS in a React + Vite project — the exact steps, why each one exists, and what to check if classes still aren't rendering after you've followed them.

What Changed: Why So Many Tutorials Are Wrong Now

Before Tailwind v4, setting it up with Vite meant installing three separate packages — tailwindcss, postcss, and autoprefixer — then running npx tailwindcss init -p to generate a tailwind.config.js and a postcss.config.js, then manually adding three @tailwind directives to your CSS file. That's the version you'll still see in most YouTube videos and older blog posts, and it's the version that trips people up most often, because the tailwindcss init -p command behaves differently across versions and sometimes fails to generate the expected files at all.

Tailwind v4 replaced that entire flow with a dedicated Vite plugin, @tailwindcss/vite, and a single @import line in your CSS. No PostCSS config, no autoprefixer, no generated config file required for a standard setup. It's genuinely simpler — but only if you're following v4 instructions specifically, since mixing v3 steps into a v4 install (or the reverse) is the single most common reason Tailwind silently does nothing in a fresh project.

Prerequisites

You need Node.js 18 or later installed — both current Vite and Tailwind v4 require it. Check your version before starting:

node -v
npm -v

Any recent LTS version of Node will work fine. If node -v returns something below v18, update Node first — an outdated Node version is a less common but real reason installs fail partway through with cryptic errors that have nothing to do with Tailwind itself.

Step 1: Create a Vite + React Project

Skip this step if you already have an existing Vite + React project — jump to Step 2. Otherwise, scaffold a fresh one:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Using TypeScript instead? Swap the template to react-ts — every step after this point is identical regardless of which one you pick, since Tailwind's setup doesn't touch your TypeScript configuration at all.

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

Before adding Tailwind, it's worth running npm run dev once just to confirm the base Vite + React app actually loads. If something's broken here, you want to know that before layering Tailwind on top and wondering which of the two tools is actually the problem.

Step 2: Install Tailwind CSS and the Vite Plugin

This is the step where the current setup diverges most from what older guides describe. You only need two packages — tailwindcss itself and the official Vite plugin that integrates it:

npm install tailwindcss @tailwindcss/vite

That's the entire install command. No postcss, no autoprefixer, and no separate init command to run afterward. If a tutorial has you running npx tailwindcss init -p right after this, it's describing the v3 flow — you can skip it entirely for a standard v4 setup.

Step 3: Add the Plugin to vite.config.js

Open your vite.config.js (or vite.config.ts) and add the Tailwind plugin to the plugins array, alongside the existing React plugin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

This is what actually wires Tailwind into Vite's build pipeline — it's the direct replacement for the old postcss.config.js approach. If your project already has other plugins listed (like vite-tsconfig-paths, or a router-specific plugin), just add tailwindcss() into the existing array rather than replacing it.

Step 4: Import Tailwind in Your CSS

Open your main CSS file — usually src/index.css — and replace its entire contents with a single import line:

@import "tailwindcss";

That one line replaces what used to be three separate directives — @tailwind base;, @tailwind components;, and @tailwind utilities; — in the v3 setup. If you're editing an existing project and see those three lines still in your CSS file from an older install, delete them and replace the whole block with the single @import above; mixing the old directives with a v4 install is a common source of build warnings.

Make sure this CSS file is actually imported somewhere your app loads — typically in src/main.jsx (or main.tsx):

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

This is a step people skip when copying a scaffolded index.css that was already wired up, then break when they rename the file or generate a fresh one — if the import line above is missing, Tailwind's classes exist in your build but never actually reach the page.

Step 5: Run the Dev Server and Test It

Start Vite's dev server:

npm run dev

Then drop a few utility classes into your App component to confirm everything's actually wired up correctly — not just that the app compiles without errors:

function App() {
  return (
    <h1 className="text-3xl font-bold text-blue-600 underline">
      Hello, Tailwind!
    </h1>
  )
}

export default App

Open the app in your browser. If the text is large, bold, blue, and underlined, Tailwind is correctly installed and processing your classes. If it renders as plain, unstyled text — same size and color as the rest of the page — something in the steps above didn't connect, and it's worth working through the troubleshooting section below rather than reinstalling packages at random, which is the trap a lot of people fall into here.

That's the Whole Setup

Five steps, two packages, one plugin line, one CSS import. No config file was generated, and for a standard project, you don't need one — Tailwind v4 infers your content sources automatically rather than requiring you to list file paths in a content array the way v3 did. You only need a tailwind.config.js if you're doing deliberate customization, like extending the default color palette or adding a custom font family, which is covered separately below.

Do You Need tailwind.config.js at All?

Not for a standard setup, and this is one of the biggest practical differences from v3 worth understanding clearly. In Tailwind v3, the config file was doing real, necessary work — telling Tailwind which files to scan for class names so it knew what to include in the final CSS. In v4, that detection happens automatically through the Vite plugin, so a fresh project genuinely works with zero config file.

You'd add one back only when you need to customize Tailwind's defaults — extending the theme with brand colors, custom breakpoints, or additional font families. If and when you do need that, Tailwind v4 supports defining theme customization directly in CSS using an @theme block, which is worth knowing about even if you don't need it on day one:

@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-display: "Inter", sans-serif;
}

That block, sitting right in your CSS file, is the v4-native way to extend the theme — it's worth knowing this exists so you're not reaching for a tailwind.config.js out of habit the moment you need your first custom color.

Troubleshooting: Tailwind Classes Not Applying in Vite

If you've followed the steps above and classes still aren't rendering, work through these in order — they cover the overwhelming majority of cases people run into.

1. You mixed v3 and v4 instructions

This is the single most common cause. Check your CSS file: if it still has @tailwind base;, @tailwind components;, and @tailwind utilities; instead of the single @import "tailwindcss"; line, you're following v3 syntax on a v4 install (or you have leftover config from a previous setup). Replace those three lines with the single import.

2. The dev server wasn't restarted after editing vite.config.js

Vite's hot module replacement handles most file changes live, but changes to vite.config.js itself sometimes require a full restart to take effect. Stop the dev server (Ctrl+C) and run npm run dev again after adding the plugin.

3. The CSS file isn't actually imported

Double-check that main.jsx (or main.tsx) has the import './index.css' line — or whatever your CSS file is actually named. It's an easy line to lose when renaming files or copying boilerplate from a different template.

4. You're using an old postcss.config.js that's now conflicting

If you're migrating an existing project from v3 to v4 rather than starting fresh, check for a leftover postcss.config.js referencing tailwindcss as a PostCSS plugin. On a standard v4 + Vite setup using the @tailwindcss/vite plugin, that file isn't needed and can cause conflicts — remove it unless your specific stack (some Next.js or Angular setups) requires the separate @tailwindcss/postcss package instead of the Vite plugin.

5. The plugin import path is wrong

Confirm the import in vite.config.js is exactly import tailwindcss from '@tailwindcss/vite' — note this is a different package from the base tailwindcss package. Confusing the two, or only installing one of them, is a quiet source of a broken build.

"Almost every 'Tailwind isn't working' report traces back to one thing: a v3 instruction followed on a v4 install, or the reverse. Check your CSS file's import syntax first."

Adding a Component Library on Top (Optional)

Once Tailwind itself is working, a lot of React + Vite projects layer a component library on top rather than styling every element by hand from raw utility classes. A few common options, if you're deciding what's next:

• shadcn/ui — copy-paste components you own directly in your codebase, built on Tailwind and Radix primitives, rather than an installed dependency
• DaisyUI — adds semantic component classes like btn and card on top of Tailwind's utilities, for teams who want less verbose className strings
• Flowbite React — pre-built interactive components (dropdowns, modals, datepickers) that plug directly into a Tailwind setup

None of these are required — plenty of production apps use Tailwind's utility classes directly with no component library layered on top. They're worth knowing about once the base setup above is confirmed working, not before.

Common Mistakes When Installing Tailwind in Vite

• Following a v3 tutorial (postcss, autoprefixer, npx tailwindcss init -p) on a fresh v4 install — the two setups aren't compatible, and mixing them is the top cause of a broken build
• Forgetting to add the CSS import to main.jsx — Tailwind can be perfectly configured and still show nothing if the CSS file itself is never loaded
• Not restarting the dev server after changing vite.config.js — some config changes need a fresh start, not just a hot reload
• Leaving an old postcss.config.js in place after migrating to the Vite plugin flow, causing conflicting processing paths
• Assuming you need a tailwind.config.js on day one — you don't, unless you're customizing the theme beyond Tailwind's defaults

The Practical Takeaway

The current, correct install for Tailwind CSS in React + Vite is short: npm install tailwindcss @tailwindcss/vite, add the plugin to vite.config.js, replace your CSS file's contents with @import "tailwindcss";, and run the dev server. No config file, no PostCSS setup, no autoprefixer. If you land on a tutorial showing more steps than that — a generated config file, three @tailwind directives, a separate postcss.config.js — it's very likely describing the older v3 flow, and following it on a fresh v4 install is exactly what leaves people with unstyled pages and no obvious error to debug.

Once Tailwind is confirmed working, the fastest way to actually get comfortable building UI with it is the same as with any part of the frontend stack: build something real with it, rather than just reading through the utility class reference.

Want to practice building real, interactive React components next? Try a React coding challenge on ReactGrind →