How to Fix Tailwind CSS Not Working in Create React App: A Complete Guide to Integrating Tailwind in React

Tailwind CSS fails in Create React App when you try to use the core tailwindcss package as a PostCSS plugin because, as of version 3.4, the PostCSS functionality has moved to a separate package called @tailwindcss/postcss, which Create React App requires to process your CSS correctly.

Setting up Tailwind in React projects built with Create React App (CRA) requires understanding how the build toolchain processes CSS. According to the tailwindlabs/tailwindcss source code, the core package no longer exports a PostCSS plugin directly, which causes integration failures in CRA's default configuration.

Why Tailwind CSS Fails in Create React App

Create React App builds your stylesheet with PostCSS under the hood. Tailwind CSS is not a built-in PostCSS plugin anymore—the core package (tailwindcss) only exports the compiler API. If you import or register tailwindcss directly as a PostCSS plugin, CRA will throw the error defined in Tailwind’s source:

It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package, so to continue using Tailwind
CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your
PostCSS configuration.

This error is produced by postcssPluginWarning() in [packages/tailwindcss/src/index.ts](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/index.ts#L862-L665). Therefore, a CRA project fails to generate any Tailwind utilities when the configuration tries to treat tailwindcss as a PostCSS plugin.

How Create React App Processes CSS

Understanding CRA's CSS pipeline explains why the wrong package reference breaks the build:

1. CRA bundles PostCSS (v8) and runs it with a generated postcss.config.js that reads the postcss field in your package.json.

2. The config must list real PostCSS plugins (objects with a postcssPlugin property). The Tailwind plugin lives in the separate package @tailwindcss/postcss.

3. When the plugin is missing or the wrong package is referenced, CRA still runs PostCSS but skips Tailwind, leaving your @tailwind directives untouched. Consequently, no utility classes appear in the browser.

Step-by-Step Solution to Integrate Tailwind in React

1. Install the Correct Packages

You need both the core compiler and the separate PostCSS adapter:

npm install -D tailwindcss@latest @tailwindcss/postcss@latest postcss autoprefixer

• tailwindcss provides the compiler and the tailwind.config.js file.
• @tailwindcss/postcss supplies the actual PostCSS plugin that CRA can load.

2. Initialize Tailwind Configuration

Generate the configuration file once:

npx tailwindcss init

This creates a minimal tailwind.config.js. Adjust the content array so CRA’s source files are scanned:

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

3. Add Tailwind Directives to Your CSS

Add the Tailwind directives to your main stylesheet (commonly src/index.css):

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

4. Configure PostCSS for Create React App

CRA automatically reads a postcss.config.js file if it exists. Create the file with the proper plugin reference:

// postcss.config.js
module.exports = {
  plugins: {
    // Use the new dedicated package
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

Alternatively, you can use the postcss field in package.json:

{
  "postcss": {
    "plugins": {
      "@tailwindcss/postcss": {},
      "autoprefixer": {}
    }
  }
}

5. Import Styles in Your React Entry Point

Ensure your main CSS file is imported in your application entry point:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';   // Tailwind CSS is loaded here
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

6. Start the Development Server

Run the CRA development server:

npm start

You should now see Tailwind utility classes being applied (e.g., className="bg-blue-500 p-4").

Why the Old Approach No Longer Works

Older Tailwind versions bundled the PostCSS plugin directly in the tailwindcss package. Starting with v3.4, the plugin was split out into @tailwindcss/postcss to keep the core compiler lightweight and to allow independent versioning.

If you follow older tutorials that suggest adding require('tailwindcss') to a postcss.config.js, CRA will hit the guard in postcssPluginWarning() and abort with the message shown above.

Complete Configuration Examples

Full postcss.config.js for CRA

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}, // The correct Tailwind PostCSS plugin
    autoprefixer: {},           // CRA already includes Autoprefixer
  },
};

Minimal tailwind.config.js

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

src/index.css with Tailwind directives

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

React entry point importing the stylesheet

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';          // Tailwind CSS is loaded here
import App from './App';

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

Key Source Files in the Tailwind Repository

File	Purpose	Link
packages/tailwindcss/src/index.ts	Contains the guard (postcssPluginWarning) that explains why the direct plugin import fails.	https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/index.ts#L862-L665
packages/@tailwindcss/postcss	Implements the actual PostCSS plugin used by CRA.	https://github.com/tailwindlabs/tailwindcss/tree/main/packages/@tailwindcss/postcss
playgrounds/nextjs/postcss.config.js	Example PostCSS config that uses @tailwindcss/postcss; shows the correct syntax.	https://github.com/tailwindlabs/tailwindcss/blob/main/playgrounds/nextjs/postcss.config.js

Summary

• Use @tailwindcss/postcss, not tailwindcss, as your PostCSS plugin in Create React App.
• The core tailwindcss package only exports the compiler API; attempting to use it as a PostCSS plugin triggers the postcssPluginWarning() guard in packages/tailwindcss/src/index.ts.
• Always configure postcss.config.js to reference @tailwindcss/postcss and ensure your tailwind.config.js content array includes ./src/**/*.{js,jsx,ts,tsx}.
• Import your CSS file containing @tailwind directives in src/index.js or src/index.tsx.

Frequently Asked Questions

Why do I get the error "It looks like you're trying to use tailwindcss directly as a PostCSS plugin"?

This error originates from the postcssPluginWarning() function in packages/tailwindcss/src/index.ts. Starting with Tailwind CSS v3.4, the PostCSS plugin was moved to a separate package called @tailwindcss/postcss. If your postcss.config.js references tailwindcss instead of @tailwindcss/postcss, the core package detects this and throws the error to prevent silent failures.

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

No, you do not need to eject. Create React App supports custom PostCSS configuration through a postcss.config.js file in your project root or the postcss field in package.json. Since CRA uses PostCSS v8 internally, you can configure the @tailwindcss/postcss plugin without ejecting, as long as you follow the correct installation steps outlined above.

What is the difference between tailwindcss and @tailwindcss/postcss?

The tailwindcss package contains the core compiler, CLI, and configuration system used to scan your content and generate utility classes. The @tailwindcss/postcss package is a thin wrapper that exposes Tailwind as a PostCSS plugin, allowing build tools like Create React App to run Tailwind during the CSS transformation pipeline. You need both packages installed, but only @tailwindcss/postcss should appear in your PostCSS configuration.

Why are my Tailwind classes not showing up in the browser?

If your classes are not appearing, verify three things: First, ensure your tailwind.config.js content array includes the paths to your React components (e.g., ./src/**/*.{js,jsx,ts,tsx}). Second, confirm that postcss.config.js uses @tailwindcss/postcss and not tailwindcss. Third, check that your main CSS file containing @tailwind directives is imported in your application's entry point (usually src/index.js or src/index.tsx). Missing any of these steps causes the build pipeline to skip Tailwind processing, leaving your HTML unstyled.

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