How to Use Tailwind CSS with React

Tailwind CSS v4 styles React components with small utility classes, and it plugs into Vite through a dedicated plugin instead of a PostCSS setup. This guide installs Tailwind in a Vite React app, replaces the default stylesheet, and styles a button to confirm the pipeline works.

Prerequisites

You need Node.js 20 or higher, which the official Tailwind upgrade tooling requires. A working Vite React app is the starting point, and the setup assumes the default structure where main.jsx imports src/index.css.

Install and configure

The setup has four ordered steps: install two packages, register a plugin, import Tailwind in one CSS file, and restart the dev server.

Install the packages

Tailwind v4 splits the engine and the Vite plugin into two packages that you install together.

bash

npm install tailwindcss @tailwindcss/vite

Register the Vite plugin

Open vite.config.js and add the plugin to the plugins array, next to the existing React plugin.

index.js

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

The plugin gives Tailwind access to the files Vite transforms, so it can scan them for utility classes.

Import Tailwind in your CSS

Replace the contents of src/index.css with a single import. The existing import in main.jsx stays in place.

css

@import "tailwindcss";

This import pulls in Tailwind's base styles, utilities, and theme as CSS that Vite processes.

Start the dev server

Restart the server so the new plugin is picked up, then open the local URL it prints.

bash

npm run dev

After these steps the app reloads with Tailwind active, even though no component uses a utility yet. The browser may briefly show unstyled markup on the first reload, which is normal while the plugin compiles.

Style your first component

Utilities are plain class names on JSX elements. Replace the default content in App.jsx with a small card to see Tailwind working.

App.jsx

function App() {
  return (
    <div className="max-w-sm rounded-xl bg-white p-6 shadow-md">
      <h2 className="text-lg font-semibold text-gray-900">Tailwind is active</h2>
      <p className="mt-2 text-gray-600">
        This card is styled entirely with utility classes.
      </p>
      <button className="mt-4 rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
        Try it
      </button>
    </div>
  );
}

The browser renders a white card with rounded corners, a shadow, a heading, and an indigo button that darkens on hover. Each class sets one property, so the layout reads left to right like a spec.

How Tailwind decides what to ship

Tailwind scans your source files for class names and generates only the CSS those names need. If you never write a class, its rule never enters the output, which keeps the stylesheet small without manual cleanup.

That scanning is why the plugin must be registered and why the import belongs in one CSS file that Vite processes. Tailwind v4 reads the theme and utilities from that import at build time.

Troubleshooting

• No styles appear. Confirm the plugin is in vite.config.js and that your CSS file contains the import, then restart the server.
• Utilities render but look different. v4 renamed some v3 classes, such as the shadow scale, so check the upgrade guide if you are porting an older project.
• Unsupported browser. v4 targets Safari 16.4, Chrome 111, and Firefox 128 or newer, so stay on v3.4 for older browser support.

Once utilities work, the natural next step is a dark mode toggle. For the choice between this and scoped CSS, see CSS Modules vs Tailwind.