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

[elirov]

Having the same issue. Works in ng serve/build, but not in storybook.

[SeraphCoding]

Having the same issue. Works in ng serve/build, but not in storybook.

Check out the referenced issue.
#22544

If you need it to work now, you can make it work using the plug in by analog js.

The discussion in the referenced issue has a couple of reproduction repos as well to see how to get it done.

This would switch to vite in order to build the storybook, which comes with its own quirks.

[neenz16]

I'm working on this - Team (Amormio, Neenu, William)

[benjamin-gooding]

Unless I am missing something it seems that @storybook/angular will not work at all with Tailwind 4?

I investigated a little this morning and it looks like the Tailwind < v4 and @storybook/angular relies on the following code in node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/styles.js which throws the exception

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

when a tailwind.config.js is present.

    const extraPostcssPlugins = [];
    // Attempt to setup Tailwind CSS
    // Only load Tailwind CSS plugin if configuration file was found.
    // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
    // The package may be unknowningly present due to a third-party transitive package dependency.
    const tailwindConfigPath = await (0, tailwind_1.findTailwindConfigurationFile)(root, projectRoot);
    if (tailwindConfigPath) {
        let tailwindPackagePath;
        try {
            tailwindPackagePath = require.resolve('tailwindcss', { paths: [root] });
        }
        catch {
            const relativeTailwindConfigPath = path.relative(root, tailwindConfigPath);
            logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
                ` but the 'tailwindcss' package is not installed.` +
                ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
        }
        if (tailwindPackagePath) {
            extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
        }
    }

The current @storybook/angular implementation seems to circumvent the Angular devkit postcss-configuration code which is why the .postcssrc.json is ignored.

This got Tailwind v4 working, though only a spike and not a long term solution.

    // const tailwindConfigPath = true;
    // if (tailwindConfigPath) {
    //     let tailwindPackagePath;
    //     try {
            let tailwindPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });
        // }
        // catch {
        //     const relativeTailwindConfigPath = path.relative(root, tailwindConfigPath);
        //     logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
        //         ` but the 'tailwindcss' package is not installed.` +
        //         ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
        // }
        // if (tailwindPackagePath) {
            extraPostcssPlugins.push(require(tailwindPackagePath)());
        // }
    // }

[tomavic]

Did anyone has reached to a solution?

[lcardosol]

Nothing on this yeat? :/

[vandres]

I got it working with the above comment #30208 (comment) and included it into our build pipeline with patch-package