Angular jasmine with karma testing - postcss issue

[DSplawski-CC]

What version of Tailwind CSS are you using?

For example: v4.0.7

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

@angular-devkit/build-angular v19.1.8

What version of Node.js are you using?

For example: v22.9.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://github.com/DSplawski-CC/AngularTailwindCss

Just created Angular project in webstorm and followed instruction to install and configure tailwindcss for Angular
https://tailwindcss.com/docs/installation/framework-guides/angular

Describe your issue

It works fine when building or serving project, but it does not work when trying to run test via ng test

An unhandled exception occurred: It looks like you're trying to use tailwindcssdirectly 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/postcssand update your PostCSS configuration.
at Re (F:\AngularTailwindCss\node_modules\tailwindcss\dist\lib.js:33:1716) at getStylesConfig (F:\AngularTailwindCss\node_modules\@angular-devkit\build-angular\src\tools\webpack\configs\styles.js:106:66) at async Promise.all (index 1) at async generateWebpackConfig (F:\AngularTailwindCss\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:74:22) at async generateBrowserWebpackConfigFromContext (F:\AngularTailwindCss\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:129:20) at async initializeBrowser (F:\AngularTailwindCss\node_modules\@angular-devkit\build-angular\src\builders\karma\browser_builder.js:109:24)

[philipp-spiess]

Hey! This seems to be specific to your Angular setup but this error occurs when you are configuring the tailwindcss package as a PostCSS extension.

The repro you posted seems to work fine for me so perhaps it's also an npm dependency issue. Try deleting your node_modules folder and run npm install again:

[DSplawski-CC]

As I mentioned in description - Issue is not related while serving app. This works thanks to configuration in .postcssrc.json file.
But, when I try to run tests via ng test i got issue with postcss. I assume that this configuration file should be used by test architecture as well as for serve and build but it seems it not?

[philipp-spiess]

Oh, yeah I would expect so too but I'm not familiar how ng test is set up. Might be a better question directed towards the Angular community?

[DSplawski-CC]

It might be. I just wanted to ask there since I found angular related guide how to configure TailwindCSS.
I hoped that somebody could help be with running under unit tests (Jasmine and Karma)

[gamoreli]

any news regarding this? I posted it in the angular-cli repo but they have no answer for this as well.

[geyuqiu]

Any idea why this issue exists on Mac and not on windows with same setup ?
because it looks like the issue is exactly here:

extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));

from node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/styles.js:96:66)

maybe the path separator is different on mac and windows ? And the error is misleading.