[v4] Unable to get tailwind running with CRA

[Imafikus]

What version of Tailwind CSS are you using?

v4.0.14

What build tool (or framework if it abstracts the build tool) are you using?

Project was created using CRA, currently using postcss: 8.5.3

What version of Node.js are you using?

v21.1.0

What browser are you using?

Firefox

What operating system are you using?

macOS, Windows

Reproduction URL

Not sure how to reproduce this, since it's a build time bug

Describe your issue

I've upgraded my project as per migration instructions and I've installed separate @taliwindcss/postcss package as required.

Steps I took:

• Run npx @tailwindcss/upgrade
• Installed @taliwindcss/postcss
• Run npm run start which is an alias for react-scripts start
• I'm getting the following error constantly:

Failed to compile.

Error: 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.

[wongjn]

react-scripts has hardcoded integration for Tailwind CSS. This means it still includes tailwindcss instead of @tailwindcss/postcss in the PostCSS configuration.

To work-around this, you could consider:

• Ejecting the configuration so that you can include @tailwindcss/postcss instead of tailwindcss in the PostCSS configuration.
• Use CRACO to attempt to customize the PostCSS configuration.

[Imafikus]

Thanks for the quick reply reply, I've tried migrating but I honestly don't have more time to invest in this right now.

If anyone has the same problem and actually solves it, I'd be more than happy to know the steps they took, either with CRACO or by ejecting.

Cheers!