Storybook中TailwindCSS未完整加载问题求助（NextJS+TS）

我用 Storybook + TailwindCSS + NextJS + Typescript 搭建组件文档，目前只有项目里已经用过的 Tailwind 样式能在 Storybook 里生效，新增的 padding、color 这类样式都不生效。试过多种样式导入方式，包括创建输出文件、导入 ../app/globals.css 和 tailwindcss/tailwind.css，结果都一样，没法加载完整的 Tailwind 样式。

我的 preview.ts 代码： #

import type { Preview } from "@storybook/react";
import "../app/globals.css"

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

项目依赖版本： #

"dependencies": {
    "next": "^13.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@storybook/addon-a11y": "^7.4.5",
    "@storybook/addon-essentials": "^7.4.5",
    "@storybook/addon-links": "^7.4.5",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/blocks": "^7.4.5",
    "@storybook/nextjs": "^7.4.5",
    "@storybook/react": "^7.4.5",
    "@storybook/testing-library": "^0.2.1",
    "@types/node": "^20.7.0",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.7",
    "autoprefixer": "^10.4.16",
    "class-variance-authority": "^0.7.0",
    "eslint": "^8.50.0",
    "eslint-config-next": "^13.5.3",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-storybook": "^0.6.14",
    "postcss": "^8.4.30",
    "prettier": "^3.0.3",
    "storybook": "^7.4.5",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.2.2"
  }

解决方案： #

问题核心是 Tailwind 的 JIT 模式默认只会打包项目中实际扫描到的样式，而 Storybook 的组件文件大概率没被纳入扫描范围，按以下步骤调整：

1. 修改 tailwind.config.js，加入 Storybook 文件扫描路径
   打开项目根目录的 tailwind.config.js，在 content 数组中添加 Storybook 相关文件路径，让 Tailwind 能扫描到 stories 里用到的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // 新增下面两行
    './stories/**/*.{js,ts,jsx,tsx}',
    './.storybook/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确保 Storybook 正确集成 PostCSS 配置
   检查 .storybook/main.ts，确认 @storybook/addon-styling 已正确配置，让 Storybook 能识别 Tailwind 的 PostCSS 规则：

import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    {
      name: "@storybook/addon-styling",
      options: {
        postCss: {
          implementation: require.resolve("postcss"),
        },
      },
    },
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

3. 完全重启 Storybook 服务
   修改配置后，必须关闭当前的 Storybook 进程，重新启动服务，确保新配置生效。

如果以上操作后仍有问题，可尝试：

• 清除缓存：执行 rm -rf node_modules .next .storybook/cache && npm install
• 检查 globals.css 是否包含完整的 Tailwind 指令：

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

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