在NextJS&Tailwind项目旁安装Storybook样式失效求解决方案

问题核心是独立的Storybook环境缺少TailwindCSS编译所需的配置，导致导入的原始globals.css中的Tailwind指令未被解析为实际样式。以下是可行的解决方案：

1. 在Storybook目录创建Tailwind配置文件 #

在my-project/storybook下新建tailwind.config.js（或.ts），让Storybook识别Next项目中的组件文件范围：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 扫描Next项目下所有需要应用Tailwind的文件
    "../next/src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 在Storybook目录创建PostCSS配置文件 #

Tailwind依赖PostCSS编译，在my-project/storybook下新建postcss.config.js：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. 确保globals.css的Tailwind指令正确 #

确认Next项目中的next/src/app/globals.css包含完整的Tailwind基础指令：

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

4. （可选）调整Storybook的Webpack配置 #

如果上述步骤仍未生效，在my-project/storybook/.storybook/main.ts中添加Webpack规则，确保CSS被正确处理：

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../../next/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: async (config) => {
    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
        include: /next\/src/,
      });
    }
    return config;
  },
};

export default config;

完成上述配置后，重启Storybook即可加载TailwindCSS样式，无需依赖Next项目的构建产物。

内容的提问来源于stack exchange，提问作者Antoine GUGLIELMI