如何在 Nx 工作区 Angular 库中为 Storybook 启用 Tailwind.css？

Question

我在 Nx 工作区中创建了一个 Angular 库来提供 ui-组件 (ui-kit)。我向这个图书馆添加了 Storybook，它运行良好。现在我还想包括 Tailwind，因为组件使用它。

我使用 nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook 命令为该库设置顺风。该库可用ui。

我有一个 tailwind.config.js 看起来像这样：

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: [],
};

并添加了内容为

的顺风-imports.css

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

导入到图书馆的 .storybook 文件夹中的 preview.js。

但是，没有顺风。

是否有任何可遵循的秘诀或一些运行使用 nx、angular、故事书和顺风的示例？

使用 nx 版本 13.8.3

非常感谢您的帮助！

Answer 1

我有一个正在运行的 React 版本，希望对您有所帮助。

请记住，故事书需要硬刷新才能反映 UI 更新，因为没有开箱即用的 hot-reloading。

我们将使用看到的 PostCSS 版本 here。

您需要以下文件：

// 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;

Answer 2

在 project.json（在您的库内）中，将 'styles' 数组添加到 'build-storybook' 目标：

"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
    }
  }
}

在styles.scss里面：

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

Answer 3

这是一篇解释如何操作的文章：Set up Tailwind CSS and Storybook with Angular in an Nx workspace

此外，这是由 Nx 团队的 Leo 创建的 a sample repo。

Answer 4

在库中的 .storybook 文件夹中添加一个 styles.css 文件，并确保该库中也有一个 tailwind.config.js！

"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
    }
  }
}

在你写的 styles.css 文件中：

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

如何在 Nx 工作区 Angular 库中为 Storybook 启用 Tailwind.css？

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

tailwind-css

nrwl-nx

angular-storybook

nx-workspace