Support tailwind v4 in Unit Tests

[jlanssie]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When building a new Angular project according to the Tailwind documentation at Tailwind, it is impossible to run unit tests.

/Users/jlanssie/.nvm/versions/node/v22.13.1/bin/node /private/var/repos/personal/angular-app/node_modules/@angular/cli/bin/ng test angular-app --karma-config /Applications/IntelliJ IDEA.app/Contents/plugins/karma/js_reporter/karma-intellij/lib/intellij.conf.js --source-map
/private/var/repos/personal/angular-app/node_modules/@angular-devkit/architect/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^

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.
    at We (/private/var/repos/personal/angular-app/node_modules/tailwindcss/dist/lib.js:35:2121)
    at getStylesConfig (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/styles.js:106:66)
    at async Promise.all (index 1)
    at async generateWebpackConfig (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:74:22)
    at async generateBrowserWebpackConfigFromContext (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:129:20)
    at async initializeBrowser (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/builders/karma/browser_builder.js:109:24)

Node.js v22.13.1

Process finished with exit code 1

.postcssrc.json

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

Minimal Reproduction

1. Create a new Angular project according to the Tailwind documentation at https://tailwindcss.com/docs/installation/framework-guides/angular
2. Try to run a unit test

Exception or Error

/Users/jlanssie/.nvm/versions/node/v22.13.1/bin/node /private/var/repos/personal/angular-app/node_modules/@angular/cli/bin/ng test angular-app --karma-config /Applications/IntelliJ IDEA.app/Contents/plugins/karma/js_reporter/karma-intellij/lib/intellij.conf.js --source-map
/private/var/repos/personal/angular-app/node_modules/@angular-devkit/architect/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^

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.
    at We (/private/var/repos/personal/angular-app/node_modules/tailwindcss/dist/lib.js:35:2121)
    at getStylesConfig (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/styles.js:106:66)
    at async Promise.all (index 1)
    at async generateWebpackConfig (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:74:22)
    at async generateBrowserWebpackConfigFromContext (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:129:20)
    at async initializeBrowser (/private/var/repos/personal/angular-app/node_modules/@angular-devkit/build-angular/src/builders/karma/browser_builder.js:109:24)

Node.js v22.13.1

Process finished with exit code 1

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.1
Node: 22.13.1
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1902.1 (cli-only)
@angular-devkit/core         19.2.1 (cli-only)
@angular-devkit/schematics   19.2.1 (cli-only)
@schematics/angular          19.2.1 (cli-only)

Anything else relevant?

No response

[alan-agius4]

This is not longer an issue when creating a new project with the latest version of the Angular CLI v20.