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

Install the @tailwindcss/postcss7-compat package to bridge PostCSS version compatibility, configure your content paths in 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:

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:

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 file using the Tailwind CLI:

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:

// 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:

/* 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:

// 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:

// 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 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 example file within the tailwindlabs/tailwindcss repository to understand available customization options when extending your own configuration with the theme.extend property.

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