NX+Module Federation+React环境下Storybook未编译Tailwind类问题

针对你遇到的Tailwind工具类在Storybook中无效（但全局CSS变量正常）的问题，结合NX工作区+Module Federation的架构特性，给出以下针对性解决方案：

1. 强制Storybook使用根目录的PostCSS与Tailwind配置 #

Storybook默认可能未正确关联NX根目录的配置文件，需在.storybook/main.ts中手动配置webpack规则，指定PostCSS加载器并指向根配置：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../host/**/*.stories.tsx', '../app/**/*.stories.tsx'],
  addons: ['@storybook/addon-essentials'],
  framework: { name: '@storybook/react-webpack5', options: {} },
  // 禁用Storybook默认PostCSS，避免冲突
  features: { postcss: false },
  webpackFinal: async (config) => {
    // 覆盖CSS处理规则，使用根目录的PostCSS配置
    config.module?.rules?.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: { config: './postcss.config.js' },
          },
        },
      ],
      include: /host|app|libs|src/, // 覆盖所有微应用与UI库目录
    });
    return config;
  },
};

export default config;

确保根目录的postcss.config.js包含Tailwind插件：

// postcss.config.js
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} },
};

2. 验证全局CSS的导入与Tailwind指令完整性 #

在.storybook/preview.tsx中确保全局CSS（包含Tailwind核心指令）被正确导入，且导入顺序优先：

// .storybook/preview.tsx
import '../src/styles/global.css'; // 替换为你的全局CSS路径
import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
  },
};

export default preview;

检查全局CSS必须包含Tailwind的三个核心指令：

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 你的自定义CSS变量 */
:root {
  --primary-color: #165DFF;
}

3. 扩展Tailwind的内容扫描范围 #

确保Tailwind能扫描到所有微应用、UI库和Storybook文件，避免工具类被Tree Shaking掉：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './host/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './libs/ui/src/**/*.{js,ts,jsx,tsx}', // 你的UI库源码路径
    './.storybook/**/*.{js,ts,jsx,tsx}',
  ],
  theme: { extend: {} },
  plugins: [],
};

4. 适配NX模块解析规则 #

由于Module Federation的模块隔离特性，需在Storybook的webpack配置中添加NX的模块解析路径，确保组件和样式能被正确读取：

// .storybook/main.ts 的webpackFinal中添加
config.resolve?.modules?.push('../node_modules');
config.resolve?.alias = {
  ...config.resolve?.alias,
  '@your-org/ui': '../libs/ui/src', // 替换为你的UI库别名
};

内容的提问来源于stack exchange，提问作者Claus Marín Kaiser