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

Question

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

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

我有一个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: [],
};

并添加了带有内容的 tailwind-imports.css

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

作为导入到preview.js库的 .storybook 文件夹中。

但是，没有顺风。

是否有任何可遵循的配方或 nx、角度、故事书和顺风的一些运行示例？

使用 nx 版本 13.8.3

非常感谢您的帮助！

Answer 1

我有一个可用的 React 版本，我希望这会有所帮助。

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

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

---

您需要以下文件：

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