How to Use Tailwind CSS in React: Complete Guide 2026

Prerequisites

Before you begin, make sure you have the following installed:

• ✓Node.js v18 or later (check with: node --version)
• ✓npm v9+ or pnpm v8+ or yarn v4+
• ✓A code editor (VS Code is recommended — install the Tailwind CSS IntelliSense extension)

Step 1: Create Your React or Next.js Project

You can use Tailwind CSS with any React setup, but Next.js is the most popular choice in 2026. Choose one:

Create a Next.js project

npx create-next-app@latest my-app
# Choose: TypeScript ✓ | ESLint ✓ | Tailwind CSS ✓ | App Router ✓
cd my-app

If you select "Tailwind CSS: Yes" during the Next.js setup, Tailwind is automatically configured. You can skip to Step 5.

Create a Vite + React project

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

Step 2: Install Tailwind CSS

Install Tailwind CSS v4 and its PostCSS plugin:

npm install tailwindcss @tailwindcss/postcss postcss

Tailwind CSS v4 (released January 2025) uses a new CSS-first configuration approach. The tailwind.config.ts file is now optional — all configuration can be done directly in CSS.

Step 3: Configure PostCSS

Create or update postcss.config.mjs in your project root:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Step 4: Add Tailwind to Your CSS

Open your global CSS file (app/globals.css in Next.js or src/index.css in Vite) and add the Tailwind import:

@import "tailwindcss";

/* Add custom styles below */

Tailwind v4 Note: In Tailwind v4, you use @import "tailwindcss" instead of the old @tailwind base; @tailwind components; @tailwind utilities; directives. The old syntax still works but the new import is recommended.

Step 5: Write Your First Tailwind React Component

Now you can use Tailwind utility classes in your React components. Here is a simple card component:

// components/Card.tsx
export function Card({ title, description }: { title: string; description: string }) {
  return (
    <div className="rounded-2xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
      <h2 className="text-xl font-semibold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
    </div>
  );
}

Notice we use className instead of class in JSX. This is a React requirement — all Tailwind components in JSX format use className.

Step 6: Use Free Pre-Built Tailwind CSS Components

Building every component from scratch is time-consuming. Tailwindready provides free copy-paste Tailwind CSS components in JSX format, perfectly suited for React and Next.js projects.

To use a component from Tailwindready:

1. 1

   Browse to a component category — for example, Hero Sections or Card Components.

2. 2

   Click the "JSX" toggle above the component preview to get the React-compatible version.

3. 3

   Click "Copy" and paste the JSX code directly into your React component file.

4. 4

   Customize the colors, text, and layout to match your project.

Tips & Best Practices for Tailwind in React

Frequently Asked Questions