# How to Add Tailwind CSS to an Existing React Project: A Complete Setup Guide
> Quickly add Tailwind CSS to your existing React project. Follow our guide to install necessary packages, configure Tailwind, and import directives for a seamless setup and faster development.
- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: how-to-guide
- Published: 2026-02-14
---
**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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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.
```bash
npm install -D tailwindcss postcss autoprefixer
```
If you use Yarn or pnpm:
```bash
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`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) and [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) in your project root:
```bash
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`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) to specify where Tailwind should look for class names. For a standard React project, target your JSX and TSX files:
```javascript
/** @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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/index.css)) to include the Tailwind directives:
```css
@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:
```javascript
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();
```
### Build Tool Specific Configuration
**Create React App (CRA):** PostCSS is pre-configured. The [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) file generated in step 2 is automatically detected and applied during the build.
**Vite:** Vite automatically picks up [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/integrations/vite/config.test.ts).
**Next.js:** Next.js automatically detects and uses [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) without additional configuration. Ensure your `content` paths in [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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:
```tsx
export default function Hero() {
return (
Welcome to Tailwind + React
Build beautiful UIs with utility‑first classes—no CSS files to maintain.
);
}
```
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`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) and [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js).
- **Configure** the `content` array in [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js). For a standard React project, you should configure it to scan `./src/**/*.{js,jsx,ts,tsx}` and [`./public/index.html`](https://github.com/tailwindlabs/tailwindcss/blob/main/./public/index.html). The scanning logic is implemented in Rust within [`crates/oxide/src/scanner.rs`](https://github.com/tailwindlabs/tailwindcss/blob/main/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.