# How to Use create-react-app with tailwindcss v4: Complete Setup Guide

> Easily set up Tailwind CSS v4 with Create React App. Learn to install compatibility, configure tailwind.config.js, and import directives for seamless integration without ejecting.

- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: tutorial
- Published: 2026-02-14

---

**Install the `@tailwindcss/postcss7-compat` package to bridge PostCSS version compatibility, configure your content paths in [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js), and import the `@tailwind` directives in your CSS entry point to use Tailwind CSS v4 with Create React App without ejecting.**

Setting up **create-react-app with tailwindcss v4** requires a compatibility layer because CRA uses PostCSS 7 in its webpack configuration, while Tailwind v4 expects PostCSS 8 features. The official `@tailwindcss/postcss7-compat` package resolves this conflict, allowing you to leverage Tailwind v4's JIT compiler and modern utility classes within a standard CRA project.

## Installing create-react-app with tailwindcss v4

### Create a New CRA Project

Begin by scaffolding a new React application using the standard CRA command:

```bash
npx create-react-app my-app
cd my-app

```

### Install Tailwind CSS v4 and Dependencies

Because Create React App uses PostCSS 7, you must install the compatibility build of Tailwind v4 along with matching versions of PostCSS and Autoprefixer:

```bash
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

```

This command installs the `@tailwindcss/postcss7-compat` package, which is the official compatibility build that backports v4 functionality to work with CRA's PostCSS 7 pipeline according to the tailwindlabs/tailwindcss repository.

## Configuring Tailwind CSS v4 for React

### Generate the Configuration File

Create the [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) file using the Tailwind CLI:

```bash
npx tailwindcss init

```

This generates a minimal configuration file in your project root.

### Configure Content Paths

Update the configuration to specify where Tailwind should look for class names. In Tailwind v4, the `content` key replaces the older `purge` option:

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/**/*.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

```

As shown in the repository's example configuration, the `content` array tells the JIT compiler (default in v4) which files to scan for utility class generation during both development and production builds.

## Integrating Tailwind into Your React Application

### Create the CSS Entry Point

Create a new CSS file that imports Tailwind's three directive layers:

```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

```

This file structure mirrors the playground examples in the tailwindcss repository, where these directives establish the foundation for utility-first styling.

### Import Styles in index.js

Replace the default CRA CSS import with your Tailwind-enabled stylesheet:

```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';  // Tailwind CSS entry point
import App from './App';

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

```

## Using Tailwind Utilities in React Components

With the setup complete, you can now use Tailwind's utility classes directly in your JSX:

```jsx
// src/App.jsx
export default function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello, create-react-app with tailwindcss v4!
      </h1>
    </div>
  );
}

```

Tailwind's JIT compiler generates the necessary CSS on-the-fly as you save your components, ensuring optimal build performance without manual purging.

## Summary

- **Install the compatibility build**: Use `@tailwindcss/postcss7-compat` to bridge the PostCSS version gap between Tailwind v4 and Create React App.
- **Configure content paths**: Update [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) with the `content` array to specify which files the JIT compiler should scan for class names.
- **Import directives**: Use `@tailwind base`, `@tailwind components`, and `@tailwind utilities` in your CSS entry point to load Tailwind's layers.
- **No ejection required**: This setup works within CRA's existing webpack configuration without ejecting, preserving the zero-configuration philosophy.

## Frequently Asked Questions

### Why do I need the postcss7-compat package with CRA?

Create React App uses PostCSS 7 in its webpack configuration, while Tailwind CSS v4 requires PostCSS 8 features. The `@tailwindcss/postcss7-compat` package is the official compatibility build that backports v4 functionality to work with PostCSS 7, allowing you to use the latest Tailwind features without ejecting from CRA or modifying the underlying webpack config.

### What is the difference between the content and purge options?

In Tailwind CSS v4, the `content` configuration key replaces the `purge` option used in v3. While `purge` was primarily for removing unused styles in production builds, `content` serves as the comprehensive source of truth for the JIT compiler, specifying exactly which files to scan for class names during both development and production. This change reflects the shift to a JIT-first architecture in v4.

### Can I use Tailwind CSS v4 with React without ejecting from CRA?

Yes. By installing the `@tailwindcss/postcss7-compat` package instead of the standard Tailwind v4 package, you can configure Tailwind to work within CRA's existing PostCSS 7 pipeline. This approach requires no ejection and maintains CRA's zero-configuration philosophy while providing full access to Tailwind v4's JIT compiler and utility classes.

### Where are the Tailwind configuration defaults defined?

The default theme configuration, including color palettes, spacing scales, and typography settings, is defined in the Tailwind CSS source repository. You can reference the default configuration in the [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) example file within the tailwindlabs/tailwindcss repository to understand available customization options when extending your own configuration with the `theme.extend` property.