Conflict in Latest Tailwind CSS 4 with React 19 and PostCSS

[Minhajkarim]

I encountered an issue while setting up Tailwind CSS 4 with React 19 and PostCSS. The latest version of Tailwind (4.0.3) is causing build failures due to a PostCSS plugin conflict. The error suggests that tailwindcss should not be used directly as a PostCSS plugin.

Steps to reproduce:

1. Install Tailwind CSS 4, PostCSS, and Autoprefixer in a React 19 project.
2. Run npx tailwindcss init -p.
3. Start the development server.

Expected behavior: Tailwind CSS should compile without PostCSS errors.

Actual behavior: The build fails with a PostCSS-related error, stating that tailwindcss needs a separate PostCSS package.

It would be great if the team could clarify whether this is an expected change in Tailwind 4 or if it's a bug. If there's a workaround, please provide guidance.

Thanks for your work on Tailwind!

[wongjn]

Not part of the Tailwind team but here's my two cents. It seems like you're trying to go through the v3 process of integrating Tailwind. The init command no longer exists in v4. Consider checking the installation documentation that is most relevant to your project to integrate Tailwind v4.

[deepakthakare]

Install below command

npm install -D tailwindcss@3

It worked for me.