How to Add Tailwind CSS to an Existing React Project: A Complete Setup Guide

To add Tailwind CSS to an existing React project, install the tailwindcss, postcss, and autoprefixer packages, run npx tailwindcss init -p to generate the configuration files, then import the CSS directives in your entry file.

Tailwind CSS is a utility-first framework that integrates into React projects as a PostCSS plugin. The tailwindlabs/tailwindcss repository houses the core engine in packages/tailwindcss/, the PostCSS integration in integrations/postcss/, and the high-performance Rust-based scanner in crates/oxide/src/scanner.rs that detects which utility classes you actually use.

Install Tailwind CSS Dependencies

Add the required packages to your development dependencies. You need tailwindcss for the framework, postcss to process the CSS, and autoprefixer to add vendor prefixes.

npm install -D tailwindcss postcss autoprefixer

If you use Yarn or pnpm:

yarn add -D tailwindcss postcss autoprefixer

# or

pnpm add -D tailwindcss postcss autoprefixer

The tailwindcss package contains the core library source in packages/tailwindcss/ and exposes both the PostCSS plugin and the CLI entry point.

Configure Tailwind for Your React Project

Initialize the Configuration Files

Run the initialization command to create tailwind.config.js and postcss.config.js in your project root:

npx tailwindcss init -p

The -p flag generates the PostCSS configuration alongside the Tailwind configuration. This CLI command is implemented in packages/tailwindcss/cli/ and uses the same core engine regardless of how you invoke it.

Configure the Content Paths

Edit tailwind.config.js to specify where Tailwind should look for class names. For a standard React project, target your JSX and TSX files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content array drives the scanner logic located in crates/oxide/src/scanner.rs, which parses these files to determine which utility classes to generate.

Integrate Tailwind into Your React Application

Add Tailwind Directives to Your CSS

Create or edit your main CSS file (typically src/index.css) to include the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives tell the PostCSS plugin (from integrations/postcss/) where to inject the generated styles.

Import CSS in Your Entry Point

Import the CSS file in your application’s entry file so the bundler processes it:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';  // Tailwind directives processed here
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Build Tool Specific Configuration

Create React App (CRA): PostCSS is pre-configured. The postcss.config.js file generated in step 2 is automatically detected and applied during the build.

Vite: Vite automatically picks up postcss.config.js at the project root. The Tailwind PostCSS plugin integrates seamlessly with Vite’s CSS pipeline, as verified in the integration tests at integrations/vite/config.test.ts.

Next.js: Next.js automatically detects and uses postcss.config.js without additional configuration. Ensure your content paths in tailwind.config.js include the Next.js-specific directories (./pages/**/*, ./app/**/*).

Verify Your Setup with a React Component

Test your configuration by rendering a component that uses Tailwind utility classes:

export default function Hero() {
  return (
    <section className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-8 rounded-lg text-white">
      <h1 className="text-4xl font-bold mb-4">Welcome to Tailwind + React</h1>
      <p className="text-lg">
        Build beautiful UIs with utility‑first classes—no CSS files to maintain.
      </p>
    </section>
  );
}

If the gradient background, padding, and typography utilities render correctly, Tailwind is successfully integrated.

Summary

• Install tailwindcss, postcss, and autoprefixer as dev dependencies.
• Initialize configuration files using npx tailwindcss init -p, which creates tailwind.config.js and postcss.config.js.
• Configure the content array in tailwind.config.js to point to your React component files (e.g., ./src/**/*.{js,jsx,ts,tsx}), leveraging the scanner in crates/oxide/src/scanner.rs.
• Import Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities) in your main CSS file and import that CSS in your React entry point.
• Build tools like Create React App, Vite, and Next.js automatically detect the PostCSS configuration and wire the Tailwind plugin from integrations/postcss/ into the build pipeline.

Frequently Asked Questions

Do I need to eject from Create React App to use Tailwind CSS?

No, you do not need to eject. Create React App automatically processes CSS through PostCSS, and the postcss.config.js file generated by npx tailwindcss init -p is automatically detected and applied during the build. The Tailwind PostCSS plugin from integrations/postcss/ integrates seamlessly without modifying CRA’s internal configuration.

Can I use Tailwind CSS with Vite instead of Create React App?

Yes, Tailwind works natively with Vite. Vite automatically detects postcss.config.js at the project root and applies the Tailwind PostCSS plugin during development and production builds. The tailwindlabs/tailwindcss repository includes integration tests for Vite at integrations/vite/config.test.ts that verify this behavior.

Where does Tailwind scan for class names in my React project?

Tailwind scans the files specified in the content array of your tailwind.config.js. For a standard React project, you should configure it to scan ./src/**/*.{js,jsx,ts,tsx} and ./public/index.html. The scanning logic is implemented in Rust within crates/oxide/src/scanner.rs, which parses these files to identify which utility classes are actually used in your application.

What is the difference between the Tailwind CLI and the PostCSS plugin?

The CLI (npx tailwindcss) is a standalone executable that processes CSS files directly and is useful for simple projects or static sites. The PostCSS plugin (located in integrations/postcss/) integrates Tailwind into existing build pipelines like Webpack, Vite, or Parcel. Both entry points use the same core engine from packages/tailwindcss/ and crates/oxide/, ensuring identical output regardless of which method you choose.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}