Fix Conflict in Tailwind CSS 4 with React 19 and PostCSS

[Minhajkarim]

Dear Tailwind CSS Team,

I am experiencing a build failure when using Tailwind CSS 4 with React 19 and PostCSS. The error message indicates that tailwindcss should not be used directly as a PostCSS plugin and suggests installing @tailwindcss/postcss. However, no such package exists, and following previous PostCSS setup instructions does not resolve the issue.

Steps to Reproduce:

1. Install Tailwind CSS 4, PostCSS, and Autoprefixer in a React 19 project:

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

2. Run npx tailwindcss init -p.
3. Start the development server (npm start).

Expected Behavior:
Tailwind CSS should compile without errors and work seamlessly with PostCSS.

Actual Behavior:
The build fails with a PostCSS-related error, preventing the project from running.

Could you please look into this issue and provide a fix or guidance on how to resolve it? Many developers are encountering this problem, and a resolution would be greatly appreciated.

Thank you for your amazing work on Tailwind! 🚀

Best regards,
Minhaj

[philipp-spiess]

Heya! The error message is right here and you'll need to install @tailwindcss/postcss for use with PostCSS. Check out the Tailwind CSS v4 docs for more info: https://tailwindcss.com/docs/installation/using-postcss

[karunateam]

Yes. This is my postscss.config.js file. I also tried changing the extension to .mjs per the tailwind docs but it still doesn't fix the problem.

export default {
plugins: {
"@tailwindcss/postcss": {},
}
}

[wongjn]

Consider providing a remotely-hosted git repository that reproduces the unexpected behavior.

[Korol-b]

Yes. This is my postscss.config.js file. I also tried changing the extension to .mjs per the tailwind docs but it still doesn't fix the problem.

export default { plugins: { "@tailwindcss/postcss": {}, } }

any luck or solution so far?

[wongjn]

Would you be able to provide a git repo that reproduces the problem please?

[Korol-b]

so just found solution that worked for me and i stopped getting the same error.
TailwindCSS v3
The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

Once this is done, the other steps remain unchanged:

[Jamshaid-aziz121]

I am having the same issue

[Seiyial]

This occurred to me when after upgrading my very old Gatsby (React SSG library with its own build chain) project to Tailwind 4. It did involve a postcss config file which I updated and still encountered the error with. But turns out there was also a gatsby-config.js file where I also did this:

Scanning the project and removing those two require lines and importing/requiring tailwindcss Only through the CSS file did it for me. Dropping this here just in case you or your toolchain may also be importing tailwindcss in different places.

[Jamshaid-aziz121]

I have solution ...

…

On Fri, Feb 7, 2025 at 10:59 PM Korol-b ***@***.***> wrote: so just found solution that worked for me and i stopped getting the same error. TailwindCSS v3 The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use: npm install -D ***@***.*** Once this is done, the other steps remain unchanged: — Reply to this email directly, view it on GitHub <#16201 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2WPOM5R5NQXFCTLRDVPX532OTX7ZAVCNFSM6AAAAABWNZ3W7SVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMBZG4ZDQOA> . You are receiving this because you commented.Message ID: ***@***.*** com>

-- *Best Regards, * *M. Jamshaid Aziz* *+92 344 3044 959*

[alexandrudinca]

Run:
npm install [email protected] --save-dev
then run:
npm install -D tailwindcss@3