如何搭配安装Storybook与TailwindCSS v4？官方暂仅支持v3

由于Storybook官方目前仅提供TailwindCSS v3的集成指南，要适配v4可以按照以下手动配置步骤操作：

1. 安装必要依赖 #

确保你的项目已安装兼容版本的Storybook（推荐v7.4及以上）和TailwindCSS v4，执行以下命令安装依赖：

npm install -D tailwindcss@latest storybook@latest @storybook/addon-styling-webpack

2. 配置TailwindCSS内容路径 #

执行初始化命令生成Tailwind配置文件：

npx tailwindcss init

在生成的tailwind.config.js中，将Storybook相关的文件路径添加到content数组，确保Tailwind能扫描到故事文件中的类名：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./.storybook/**/*.{js,jsx,ts,tsx}",
    "./stories/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 配置Storybook的样式处理插件 #

在.storybook/main.js（或.storybook/main.ts）中，添加@storybook/addon-styling-webpack插件，并配置PostCSS来处理Tailwind指令：

/** @type {import('@storybook/react-webpack5').StorybookConfig} */
export default {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.css$/,
            use: [
              "style-loader",
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: [require("tailwindcss"), require("autoprefixer")],
                  },
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

4. 引入全局Tailwind样式 #

在项目中创建全局样式文件（例如src/styles/global.css），写入Tailwind的核心指令：

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

然后在.storybook/preview.js中导入这个全局样式，确保所有故事都能应用Tailwind样式：

import "../src/styles/global.css";

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

5. 验证配置 #

启动Storybook测试样式是否生效：

npm run storybook

创建一个测试故事，使用Tailwind的类名（例如bg-blue-500 text-white p-4），确认样式能正常渲染。

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