[Bug]: Angular - Storybook fails to consume postcss config file

[SeraphCoding]

Describe the bug

In order to use Tailwindcss v4 with Angular 19+ (using the new esbuild builder), it is necessary to create a postcss.config.json file, because Angular seemingly fails to consume any other variant of a postcss config (e.g. in the package.json, or using a postcss.config.mjs).

Installing Tailwindcss v4 with postCSS: https://tailwindcss.com/docs/v4-beta#installing-with-post-css
Trying to compile the angular app, without this postcss.config.json file present, will result in

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.

Once the postcss.config.json is provided - and both ng serve, ng test and ng build run smoothly, Storybook fails to compile for the same reason, as the builder (under the hood) seemingly fails to consume said postcss config.

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.

This is using the Webpack builder. I am aware that there is a plugin that tries to get Angular to run under Storybook using vite.

Reproduction link

https://github.com/SeraphCoding/AngularTW4SBVite

Reproduction steps

1. Clone the repository above
2. Install dependencies (yarn berry)
3. Run yarn run storybook
4. Wait for the compilation

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.15.0 - /tmp/xfs-ade9681f/node
    Yarn: 4.6.0 - /tmp/xfs-ade9681f/yarn <----- active
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
  npmPackages:
    @storybook/addon-docs: ^8.4.7 => 8.4.7
    @storybook/addon-essentials: ^8.4.7 => 8.4.7
    @storybook/addon-interactions: ^8.4.7 => 8.4.7
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7
    @storybook/angular: ^8.4.7 => 8.4.7
    @storybook/blocks: ^8.4.7 => 8.4.7
    @storybook/test: ^8.4.7 => 8.4.7
    storybook: ^8.4.7 => 8.4.7


**Note**
Same issues occurs on 8.5.0-beta.7

Additional context / WIP Workaround

The issue does not occur when using analogjs's angular vite plugin for the Storybook - however, I haven't been able to get the analogjs plugin to run properly in it's completion. I managed to get it to compile, though it seemingly fails to load Tailwindcss and Angular Material to begin with - so that isn't really a sustainable workaround, yet. Will update this once/if I get it to run.

[SeraphCoding]

@valentinpalkovic You requested a ping for this issue.