Tailwind CSS with React Complete Integration Guide

Tailwind CSS and React are a powerful combination for building modern user interfaces. This guide covers setting up Tailwind CSS in React projects using Vite and Next.js, best practices for using utility classes in JSX, conditional styling patterns, and reusable component techniques.

💡 Quick Answer

Using Tailwind CSS with React: Install with npm install -D tailwindcss @tailwindcss/vite, add the plugin to your Vite config, import Tailwind CSS in your stylesheet, then use utility classes via className in JSX. All Tailwind CSS utilities work in React including responsive, hover, focus, and dark mode variants.

React + Vite + Tailwind CSS Setup

bash
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm install -D tailwindcss @tailwindcss/vite

See the complete Vite setup guide for full configuration details.

Next.js + Tailwind CSS Setup

Next.js 16 uses the PostCSS plugin instead of the Vite plugin.

bash
npx create-next-app@latest my-next-app
cd my-next-app
npm install -D tailwindcss @tailwindcss/postcss
javascript
// postcss.config.mjs
export default {
  plugins: ["@tailwindcss/postcss"],
}
css
/* app/globals.css */
@import "tailwindcss";

Using Tailwind CSS in JSX Components

Apply Tailwind CSS utility classes using React's className attribute instead of HTML's class.

tsx
// components/Card.tsx
interface CardProps {
  title: string;
  description: string;
  href: string;
}

export default function Card({ title, description, href }: CardProps) {
  return (
    <a
      href={href}
      className="block p-6 bg-gray-800 rounded-xl border border-gray-700
                 hover:border-cyan-500 hover:bg-gray-750 transition-all
                 duration-300 group"
    >
      <h3 className="text-lg font-semibold text-white mb-2
                     group-hover:text-cyan-400 transition-colors">
        {title}
      </h3>
      <p className="text-gray-400 text-sm leading-relaxed">
        {description}
      </p>
    </a>
  )
}

Conditional Classes in React

Three common patterns for conditionally applying Tailwind CSS classes in React components.

tsx
// Pattern 1: Template literals
<button className={`px-4 py-2 rounded-lg font-medium transition-colors
  ${isActive ? 'bg-cyan-500 text-white' : 'bg-gray-700 text-gray-300'}`}>
  {label}
</button>

// Pattern 2: clsx library (npm install clsx)
import clsx from 'clsx'

<button className={clsx(
  'px-4 py-2 rounded-lg font-medium transition-colors',
  isActive && 'bg-cyan-500 text-white',
  !isActive && 'bg-gray-700 text-gray-300',
  isDisabled && 'opacity-50 cursor-not-allowed'
)}>
  {label}
</button>

// Pattern 3: Object syntax with clsx
<div className={clsx({
  'p-4 rounded-lg': true,
  'bg-green-500/10 border-green-500': status === 'success',
  'bg-red-500/10 border-red-500': status === 'error',
  'bg-gray-500/10 border-gray-500': status === 'idle',
})} />

React vs Other Frameworks with Tailwind CSS

FeatureReact + TailwindVue + TailwindSvelte + Tailwind
Class AttributeclassNameclassclass
Conditional Classesclsx / template literals:class bindingclass: directive
Setup Plugin@tailwindcss/vite@tailwindcss/vite@tailwindcss/vite
SSR Support✓ Next.js✓ Nuxt✓ SvelteKit
Component LibrariesHeadless UI, ShadcnHeadless UISkeleton

Frequently Asked Questions

Install Tailwind CSS in your React project using the Vite plugin (@tailwindcss/vite) or PostCSS plugin (@tailwindcss/postcss). Then use Tailwind utility classes in JSX via the className attribute. Example: <div className="flex items-center gap-4 p-6 bg-gray-100 rounded-lg">. All utility classes work identically to HTML.
Yes, Tailwind CSS works natively with Next.js. Next.js 16 supports Tailwind CSS v4 through the @tailwindcss/postcss plugin. Install it with npm install -D tailwindcss @tailwindcss/postcss, add it to postcss.config.mjs, and import tailwindcss in your globals.css. Both App Router and Pages Router are fully supported.
Use template literals or the clsx/classnames library to conditionally apply Tailwind CSS classes. Example: className={`px-4 py-2 rounded ${isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"}`}. The clsx library provides cleaner syntax: className={clsx("px-4 py-2", isActive && "bg-blue-500")}.
Tailwind CSS works with React Server Components in Next.js App Router. Since Tailwind CSS classes are compiled at build time, there is no runtime JavaScript making it ideal for server components. Use className as normal in both server and client components.
Tailwind CSS is preferred over inline styles in React because utility classes are compiled to static CSS, support responsive breakpoints, hover/focus states, dark mode, and produce smaller bundles. Inline styles cannot use pseudo-classes, media queries, or benefit from caching.

Explore Tailwind CSS component libraries for pre-built React components, or use the cheat sheet for quick class lookups.