Tailwindcss 4 beta with Angular 19 does not work in Storybook

[SeraphCoding]

Summary

Hi there,

Tailwindcss 4 has entered Beta and with the recent release of Angular 19, I wanted to check out whether it works.

I've gotten Tailwind 4 to run with Angular 19 but now I am running into issues using Storybook, where classes that come from Tailwindcss are not applied to Angular components that are displayed from within a Storybook story.

Is there any information on how to get Tailwindcss 4 to run with Storybook JS?

Considering that tailwindcss is now more "CSS native" than before, I am assuming I am missing some crucial configuration to get the styles to load inside the story.

However, I am also using Angular Material on v19+ and the Angular Material styles are applied properly. Which is odd because those are derived from the global styles.scss.

The Tailwind import and theme configuration are also positioned in the styles.scss. Keep in mind, this works just fine within the Angular app.

Additional information

I am using Angular with scss stylesheets.
I have opted into the application builder that uses esbuild and vite (for the development server only).
I am using a postcss.config.json configured as

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

I've tried also using the storybookjs postcss addon, but it did not result in styles being applied. Likewise, most ressources I've found state that you do not need that, if you are using Storybook with Angular.

I have a strong feeling that this should in theory work, but feel like there is a configuration issue that I am not seeing.