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!

Diplomate

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;

Chariot

Answer 2

I have a React version working, I hope this helps.

Keep in mind that storybook requires a hard refresh for UI updates to be reflected as there is no hot-reloading out of the box.

We are going with the PostCSS version seen here.

---

You need the following files:

// libs/{app-name}/tailwind.config.js

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

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

// libs/{app-name}/postcss.config.js

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js')
    },
    autoprefixer: {},
  },
};

// libs/{app-name}/.storybook/main.js

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

// libs/{app-name}/.storybook/preview.js

import './tailwind-imports.css';

// libs/{app-name}/.storybook/tailwind-imports.css

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

Chiastolite

Thanks Stephen. I tried this but still doesn't work on Angular. The only difference and maybe that's the point, I haven't found anything to replace the @nrwl/react/plugins/storybook addon in the .storybook/main.js – Diplomate

Say, did you successfully used nested/variables inside storybook/apps with postcss? – Riboflavin

Answer 3

Here is an article explaining how to do it: Set up Tailwind CSS and Storybook with Angular in an Nx workspace

Also, here's a sample repo, created by Leo from the Nx team.

Sirrah

Answer 4

add a styles.css file inside your .storybook folder in the library and make sure you have a tailwind.config.js in that lib too!

"storybook": {
  "executor": "@nrwl/storybook:storybook",
  "options": {
    "styles": ["libs/shared/ui-components/.storybook/styles.css"],
    "uiFramework": "@storybook/angular",
    "port": 4400,
    "config": {
      "configFolder": "libs/shared/ui-components/.storybook"
    },
    "projectBuildConfig": "shared-ui-components:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

in the styles.css file you write:

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

Australian

Answer 5

For react nx app I had a global styles file that had the tailwind imports already.

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

So all I needed was to add this to ./storybook/preview.ts

import '../src/app/global.css';

Recondition