How to Use Tailwind CSS in React (Setup and First Component)

Tailwind CSS has become the default way to style React apps, and for good reason: you style directly in your markup with small utility classes, never leave your component to hunt through a stylesheet, and ship almost no CSS. This guide walks through installing Tailwind in a React project and building your first component the Tailwind way.

What is Tailwind CSS, and how is it different?

Tailwind is a utility-first CSS framework. Instead of writing custom CSS classes like .card and then styling them, you compose designs from tiny single-purpose utility classes right in your JSX: flex for display, p-4 for padding, rounded-xl for border radius, text-lg for font size. How is Tailwind different from plain CSS? You almost never write CSS files, styles live next to the markup, and there is no naming or specificity battle.

Step 1: Install Tailwind in React (Vite)

Most modern React apps use Vite. Install Tailwind and its Vite plugin, then wire it up. (If you use Create React App or Next.js, the steps differ slightly but the ideas are identical.)

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

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

Step 2: Add Tailwind to your CSS

Create or open your main CSS file (often src/index.css) and import Tailwind. In Tailwind v4 this is a single line:

/* src/index.css */
@import "tailwindcss";

Then make sure that CSS file is imported once at the top of your app (in main.jsx or index.js). That's the whole setup, no config file required to get started in v4.

Step 3: Build your first component

Now style directly in JSX. Here's a small card built entirely with utility classes, no separate CSS:

function Card() {
  return (
    <div className="max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
      <h3 className="text-xl font-bold text-gray-900">Clean by default</h3>
      <p className="mt-2 text-gray-600 leading-relaxed">
        Styled entirely with Tailwind utilities, no CSS file needed.
      </p>
      <button className="mt-4 rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700 transition">
        Get started
      </button>
    </div>
  );
}

How to handle repeated class lists

The main objection to Tailwind is long, repeated class lists. Two clean fixes:

1. 1.Extract a React component (Button, Card) so the class list is written once and reused, this is the idiomatic React answer.
2. 2.Use @apply in CSS to bundle utilities into a semantic class for the few cases you truly repeat markup, like .btn-primary.

.btn-primary {
  @apply rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700 transition;
}

Why Tailwind is fast in production

Tailwind scans your files at build time and includes only the classes you actually used, then removes the rest. The result is a tiny CSS bundle, often a few kilobytes, regardless of how many utilities exist. Combined with staying in your component while you style, that's why teams ship faster with it.

The short version

To use Tailwind CSS in React: install tailwindcss and the Vite plugin, add @import "tailwindcss" to your main CSS, and style with utility classes directly in JSX. Extract components or use @apply when class lists repeat. You get faster styling, tiny CSS, and no naming headaches.

Every component on this site is built with Tailwind and a little GSAP. Browse the components library to see the patterns in action.