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
cd ui-library
npm install -D @nx/angular
npx nx g @nx/angular:lib ui-lib --publishable --importPath=@myorg/ui-lib --add-tailwind
npm install -D @nx/storybook
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
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
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 · Nocd ui-library
npm install -D @nx/angular
npx nx g @nx/angular:lib ui-lib --publishable --importPath=@myorg/ui-lib --add-tailwind
npm install -D @nx/storybook
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.jsonui-lib.component.html
npx nx storybook ui-lib
-> Storybook renders the component but without the tailwind styles.Nx Report
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 generatesstyles.css
. Older articles (e.g. https://dev.to/nx/jumpstart-your-angular-14-development-with-storybook-tailwind-and-nx-f60) seem to indicate thatstyles.css
is generated, but this I cannot observe it and am unsure whether it is necessary.Please see my sample repository.