How to enable Tailwind.css for Storybook in a Nx workspace Angular library?

Question

I've created an Angular library in Nx workspace to provide ui-components (ui-kit). To this library I added Storybook which was working fine. Now I also want to include Tailwind because the components make use of it.

I used the nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook command to setup tailwind for that library. The library is buildable.

I have a tailwind.config.js which looks like this:

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

and added a tailwind-imports.css with content

@tailwind base;
@tailwind components;
@tailwind utilities;

as import to preview.js in the .storybook folder of the library.

But, no tailwind.

Is there any recipe to follow or some running example with nx, angular, storybook and tailwind?

Using nx version 13.8.3

Thanks so much for any help!

Answer 1

In project.json (inside your library), add 'styles' array to 'build-storybook' target:

"build-storybook": {
  "executor": "@nrwl/storybook:build",
  "outputs": ["{options.outputPath}"],
  "options": {
    "uiFramework": "@storybook/angular",
    "outputPath": "dist/storybook/angular",
    "styles": ["libs/<library_name>/src/styles.scss"], // <------ HERE
    "config": {
      "configFolder": "libs/<library_name>/.storybook"
    },
    "projectBuildConfig": "angular:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

And inside styles.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;