How to Install Tailwind CSS in React Vite?

This guide on how to install Tailwind CSS in React Vite aims to guide developers through the complete setup of Tailwind CSS in a React project using Vite, ensuring a seamless development environment that leverages:

• Tailwind’s utility-first CSS framework for rapid UI styling,
• React’s component-based architecture for scalable frontend development, and
• Vite’s modern build tool for lightning-fast development and production builds.

Whether you’re a beginner or an experienced developer, this guide aims to help you:

• Understand the tools involved (Tailwind, React, Vite),
• Set up your project step-by-step without confusion,
• Unlock Tailwind’s potential within your React ecosystem,
• Build and scale responsive, performant interfaces quickly and efficiently.

“Most Tailwind setup guides are outdated. This one isn’t – covers the exact installation process for Tailwind CSS v4 with React 19 and Vite, the way it actually works today.”

Benefits of Using Tailwind CSS with React + Vite

• Blazing Fast Development – Vite’s instant server start and HMR, paired with Tailwind’s utility classes, speed up the development workflow.
• Component-Friendly Styling – Tailwind pairs perfectly with React’s component-based architecture.
• No More CSS Bloat – Tailwind’s JIT mode generates only the CSS you use, keeping the final bundle size small.
• Consistent Design System – Tailwind encourages design consistency through a centralized config (tailwind.config.js).
• Easier Customization – Extend Tailwind’s default theme or add plugins like Typography and Forms with minimal setup.
• No Context Switching – Style directly in JSX without jumping to separate CSS files.
• Production-Ready Output – Vite builds your project with optimal performance, and Tailwind purges unused CSS for production.

Why Another Blog on This?

Search “Tailwind CSS React Vite setup,” and you’ll find dozens of results – but most of them have a problem: they’re outdated.

A large chunk of those guides still references Tailwind v2 or v3 configuration patterns – things like manually setting up postcss.config.js, adding autoprefixer, or configuring a purge array in tailwind.config.js. If you follow those steps today with a fresh install, you’ll either hit errors or end up with a bloated, misconfigured setup.

Tailwind v4, released in early 2025, changed the setup process significantly. There’s no tailwind.config.js required default, PostCSS configuration is simpler, and the way you import Tailwind into your project is different.

Every step here is intentional. You’ll know what you’re running and why – not just copy-pasting commands and hoping it works. Gotchas are called out inline, right where you’d actually hit them.

Install Tailwind CSS in React Vite Easily:

This blog is written specifically for the current stack in 2026:

• Vite as the build tool
• React as the UI framework
• Tailwind CSS v4 – the latest, not the legacy setup

Now, let’s begin the guide

Prerequisites

Before you begin, make sure you have the following in place:

• Node.js v18+ installed – Tailwind v4 and modern Vite both require it. Run node -v to confirm.
• npm v7+ or pnpm/yarn if you prefer – examples in this post use npm.
• A basic familiarity with the terminal and React – this guide doesn’t cover either from scratch.

That’s it. No global installs needed.

Create a Vite + React Project

If you already have a Vite + React project, skip to Step 4.

Run the following command to scaffold a new project:

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

Then navigate into the project and install dependencies:

cd my-app
npm install

Quick note on the template: We’re using react here, not react-ts. If you’re working with TypeScript, swap the template to react-ts – the Tailwind setup steps are identical.

At this point, run npm run dev just to confirm your Vite + React app is working before adding Tailwind into the mix. It’s always easier to debug one thing at a time.

Install Tailwind CSS and Its Dependencies

In Tailwind v4, the installation is cleaner than before. Run:

npm install tailwindcss @tailwindcss/vite

What you just installed:

• tailwindcss – the core framework
• @tailwindcss/vite – Tailwind’s official Vite plugin, introduced in v4. This replaces the old PostCSS-based setup entirely.

Gotcha: You’ll see older guides installing postcss and autoprefixer alongside Tailwind. With Tailwind v4 + the Vite plugin, you don’t need either. Skip them – adding unnecessary dependencies only introduces potential conflicts.

Configure the Tailwind Config File

This is where Tailwind v4 is noticeably different from v3.

Open your vite.config.js file. By default, it looks like this:

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

Add the Tailwind Vite plugin:

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

That’s it for configuration. No tailwind.config.js file needed for a standard setup. Tailwind v4 moves configuration to CSS, which you’ll see in the next step.

Gotcha: If you’re using vite.config.ts (TypeScript config), the import and usage is identical – just make sure your types are in order.

Add Tailwind Directives to CSS

Open your src/index.css file and replace everything in it with:

@import "tailwindcss";

That single line is the Tailwind v4 way of bringing in the framework. It replaces the three-directive pattern from v3:

/* OLD v3 way - don't use this */
@tailwind base;
@tailwind components;
@tailwind utilities;

Gotcha: Make sure index.css is imported in your main.jsx. A fresh Vite + React scaffold already does this by default, but if you’ve cleaned up your entry file, double-check that this line exists in main.jsx:

import "./index.css";

Without this import, Tailwind’s styles will never reach your app – and you’ll spend time wondering why none of your classes are working.

Run the Dev Server and Verify the Setup

Start the dev server:

npm run dev

Now open src/App.jsx, clear out the boilerplate, and add a quick sanity check:

function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Tailwind is working!</h1>
    </div>
  );
}
export default App;

If you see a centered blue heading on a light gray background, you’re done. Tailwind is installed and working correctly.

If styles aren’t applying, run through this quick checklist:

• Is @import "tailwindcss" in your index.css?
• Is index.css imported in main.jsx?
• Is tailwindcss() added to the plugins array in vite.config.js?
• Did you save all files and let Vite hot-reload?

Nine times out of ten, it’s one of those four.

See It in Action with FlyonUI

If you’re looking for a component library built on top of Tailwind CSS, FlyonUI is a free, open-source option worth knowing about – it pairs well with exactly this stack.

Here’s a live StackBlitz demo running FlyonUI with Tailwind CSS in a React Vite project – no setup required, just open and explore:

👉 FlyonUI + React Vite – Live Demo

Entirely optional, but worth a look if you want ready-made components without leaving the Tailwind ecosystem.

If you’re looking for a Tailwind Components library, then check out FlyonUI.

Also available in the pro version. It includes

• Tailwind CSS Blocks
• Tailwind Figma Design System
• Tailwind MCP
• Tailwind CSS templates

Check it out now!

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you style your web applications using predefined utility classes directly in your HTML or JSX. Instead of writing custom CSS, you compose styles by combining small, reusable classes like bg-blue-500, text-center, or p-4.

It encourages a component-friendly design system and eliminates the need for naming CSS classes or managing large stylesheets.

What is Vite?

Vite is a fast and modern frontend build tool created by the team behind Vue.js. It offers an instant development server powered by native ES modules and lightning-fast hot module replacement (HMR). For React developers, Vite provides an alternative to Create React App (CRA) with significantly better performance.

It’s optimized for speed, modularity, and smooth DX (developer experience), especially when working with frameworks like React, Vue, and Svelte.

Btw, if you want to launch your startup faster, you can consider ready to use React SaaS starter kit.

Other helpful guides to check:

• How to create a Tailwind marquee effect
• How to Integrate Tailwind with 11ty
• Nextjs 14 Tailwind 4 Config

Conclusion:

That’s the complete setup – no fluff, no outdated steps, no unnecessary dependencies. You now have a fully working React Vite project with Tailwind CSS v4 configured and ready to use.

If you hit any issues, the checklist in Step (Run the Dev Server and Verify the Setup) covers 90% of them.

In this tutorial on how to install Tailwind CSS in React Vite, we’ve set up a React project with Vite and integrated Tailwind CSS step by step. We started by creating a new Vite React app, then installed Tailwind CSS along with PostCSS and Autoprefixer.

We initialized Tailwind’s config and configured it to scan our React files for classes, added the required @tailwind directives to our CSS, and imported it into our app. Finally, we ran the project to verify that Tailwind was working by applying some utility classes, and we even explored adding official plugins like Typography and Forms to extend Tailwind’s capabilities.

You now have a modern development environment where Tailwind CSS is fully wired up with React and Vite. This setup gives you the best of both worlds: a fast, hot-reloading dev server with Vite, and a utility-first CSS workflow with Tailwind that greatly speeds up styling and keeps your CSS maintainable.

From here, you can start building out your React application’s UI using Tailwind’s utility classes for rapid design, and customize the setup further by adjusting the Tailwind config (for example, adding custom themes or enabling more plugins) as needed. We hope you find this guide on guide of how to install Tailwind CSS in React Vite useful and worth sharing.

Happy coding, and enjoy your newly styled React app with Tailwind CSS!