# How to Fix Tailwind CSS Not Working in Create React App: A Complete Guide to Integrating Tailwind in React > Fix Tailwind CSS not working in Create React App by understanding the recent package change for PostCSS integration. Get Tailwind in React working again with this guide. - Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) - Tags: how-to-guide - Published: 2026-02-16 --- **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: ```text 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)](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`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) that reads the `postcss` field in your [`package.json`](https://github.com/tailwindlabs/tailwindcss/blob/main/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: ```bash npm install -D tailwindcss@latest @tailwindcss/postcss@latest postcss autoprefixer ``` - `tailwindcss` provides the compiler and the [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) file. - `@tailwindcss/postcss` supplies the actual PostCSS plugin that CRA can load. ### 2. Initialize Tailwind Configuration Generate the configuration file once: ```bash npx tailwindcss init ``` This creates a minimal [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js). Adjust the `content` array so CRA’s source files are scanned: ```js // 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`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/index.css)): ```css /* src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; ``` ### 4. Configure PostCSS for Create React App CRA automatically reads a [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) file if it exists. Create the file with the proper plugin reference: ```js // postcss.config.js module.exports = { plugins: { // Use the new dedicated package '@tailwindcss/postcss': {}, autoprefixer: {}, }, }; ``` Alternatively, you can use the `postcss` field in [`package.json`](https://github.com/tailwindlabs/tailwindcss/blob/main/package.json): ```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: ```tsx // 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( ); ``` ### 6. Start the Development Server Run the CRA development server: ```bash 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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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 ```js // postcss.config.js module.exports = { plugins: { '@tailwindcss/postcss': {}, // The correct Tailwind PostCSS plugin autoprefixer: {}, // CRA already includes Autoprefixer }, }; ``` ### Minimal tailwind.config.js ```js // tailwind.config.js module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx,html}'], theme: { extend: {}, }, plugins: [], }; ``` ### src/index.css with Tailwind directives ```css /* src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; ``` ### React entry point importing the stylesheet ```tsx // 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(); ``` ## Key Source Files in the Tailwind Repository | File | Purpose | Link | |------|---------|------| | [`packages/tailwindcss/src/index.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/index.ts) | Contains the guard (`postcssPluginWarning`) that explains why the direct plugin import fails. | | | `packages/@tailwindcss/postcss` | Implements the actual PostCSS plugin used by CRA. | | | [`playgrounds/nextjs/postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/playgrounds/nextjs/postcss.config.js) | Example PostCSS config that uses `@tailwindcss/postcss`; shows the correct syntax. | | ## 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`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/index.ts). - Always configure [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) to reference `@tailwindcss/postcss` and ensure your [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) content array includes `./src/**/*.{js,jsx,ts,tsx}`. - Import your CSS file containing `@tailwind` directives in [`src/index.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/index.js) or [`src/index.tsx`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js) file in your project root or the `postcss` field in [`package.json`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/index.js) or [`src/index.tsx`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/index.tsx)). Missing any of these steps causes the build pipeline to skip Tailwind processing, leaving your HTML unstyled.