Upgrading to version 4 doesn't work with Angular and NX

[Nostrus]

I tried following the required steps in the documentation, but had no luck upgrading to version 4 from 3.3.2.

After running npx @tailwindcss/upgrade@next I get:

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Cannot find any CSS files that reference Tailwind CSS.
│   Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses `@tailwind`.

│ Migrating stylesheets…

│ ↳ No PostCSS config found, skipping migration.

I guess it ignores .scss files completely? So I updated the @import manually. Also, even though it can't find any PostCSS config, when I try to serve my project now, I get:

 NX   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.

Not sure how NX uses PostCSS exactly. Next I installed @tailwindcss/postcss. We had no PostCSS config before, so I added it with the following content just in case:

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

But it didn't help, either,. I receive the same error message.

[RobinMalfait]

Hey!

It looks like you are still using tailwindcss as a PostCSS plugin somewhere. Can you share a minimal reproduction GitHub repo so we can take a look?

[vinnyo]

Hi, I'm facing the exact same issue.
Uploaded a minimal repo with the issue: https://github.com/vinnyo/nx-ng-tailwind-4
Note that I had to add postcss.config.js as that file is not needed prior to upgrading to tailwind v4

[wongjn]

Seems like it could be due to @angular-devkit/build-angular, removing the tailwind.config.js file may workaround this.

[vinnyo]

@wongjn Unfortunately, removing tailwind.config.js would essentially render tailwind useless which defeats the purpose

[PhamVanthinh2801]

Seems like it could be due to @angular-devkit/build-angular, removing the tailwind.config.js file may workaround this.

thanks so much ! OMG i searched all AI support but dont handling that !

[MatthysDev]

Hey I am facing the same issue

after upgrading Tailwind to v4 with npx @tailwindcss/upgrade@next

I have update all my postcss.config.js like this

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
  },
};

but I still have an error

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.

did you find any solution ??

thanks

[wongjn]

The tailwindcss key may be causing the error - try removing it:

 module.exports = {
   plugins: {
    '@tailwindcss/postcss': {},
-    tailwindcss: {
-      config: join(__dirname, 'tailwind.config.js'),
-    },
   },
 };

[raska-vilem]

Hi, I’ve solved similar issue.