nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.65k stars 2.36k forks source link

Tailwind integration with storybook in angular project not working #20391

Closed Clindbergh closed 11 months ago

Clindbergh commented 11 months ago

Current Behavior

Tailwind styles are not applied to angular components when generating projects according to the instructions.

Expected Behavior

The tailwind styles should be applied as expected.

GitHub Repo

https://github.com/Clindbergh/nx-angular-tailwind-storybook-stub

Steps to Reproduce

  1. npx create-nx-workspace@latest ui-library ✔ Which stack do you want to use? · angular ✔ Integrated monorepo, or standalone project? · integrated ✔ Application name · ui-library ✔ Which bundler would you like to use? · webpack ✔ Default stylesheet format · scss ✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? · No ✔ Test runner to use for end to end (E2E) tests · none ✔ Enable distributed caching to make your CI faster · No
  2. cd ui-library
  3. npm install -D @nx/angular
  4. npx nx g @nx/angular:lib ui-lib --publishable --importPath=@myorg/ui-lib --add-tailwind
  5. npm install -D @nx/storybook
  6. npx nx g @nx/angular:storybook-configuration ui-lib NX Generating @nx/angular:storybook-configuration ✔ Do you want to set up Storybook interaction tests? (Y/n) · true ✔ Automatically generate *.stories.ts files for components declared in this project? (Y/n) · true ✔ Configure a static file server for the storybook instance? (Y/n) · true UPDATE package.json
  7. Add tailwind classes in ui-lib.component.html
  8. npx nx storybook ui-lib -> Storybook renders the component but without the tailwind styles.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.14.1
   OS     : darwin-arm64
   npm    : 9.3.1

   nx                 : 17.1.3
   @nx/js             : 17.1.3
   @nx/jest           : 17.1.3
   @nx/linter         : 17.1.3
   @nx/eslint         : 17.1.3
   @nx/workspace      : 17.1.3
   @nx/angular        : 17.1.3
   @nx/cypress        : 17.1.3
   @nx/devkit         : 17.1.3
   @nx/eslint-plugin  : 17.1.3
   @nx/storybook      : 17.1.3
   @nrwl/tao          : 17.1.3
   @nx/web            : 17.1.3
   @nx/webpack        : 17.1.3
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @storybook/angular : 7.5.3

Failure Logs

No response

Package Manager Version

No response

Operating System

Additional Information

It is unclear to me how this plugin interacts with postcss (if required) and whether it generates styles.css. Older articles (e.g. https://dev.to/nx/jumpstart-your-angular-14-development-with-storybook-tailwind-and-nx-f60) seem to indicate that styles.css is generated, but this I cannot observe it and am unsure whether it is necessary.

Please see my sample repository.

github-actions[bot] commented 10 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.