Vite+Storybook项目中Tailwind CSS默认样式生效但工具类失效求助

1. 确认Tailwind基础样式已在Storybook中引入 #

Storybook需要单独导入包含Tailwind核心指令的CSS文件，在.storybook/preview.js（或preview.ts）中添加：

import '../src/index.css'; // 路径根据你的CSS文件实际位置调整

确保该CSS文件（如src/index.css）包含以下Tailwind指令：

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

2. 修正Tailwind配置的content路径 #

你当前的tailwind.config.js使用了复杂的排除规则，可能导致组件文件未被正确扫描。简化路径匹配，确保覆盖所有用到Tailwind类的文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{ts,tsx,html}",
    "./storybook/**/*.{ts,tsx,html}",
    "./src/**/*.{ts,tsx,html}" // 若项目有src目录则添加
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 确保PostCSS配置在Storybook中生效 #

Storybook可能无法自动识别项目根目录的postcss.config.cjs，需在.storybook/main.js中明确配置：

module.exports = {
  // 其他现有配置
  addons: [
    // 其他addons
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

如果未安装@storybook/addon-postcss，先执行安装命令：

npm install @storybook/addon-postcss --save-dev

4. 清理缓存并重启服务 #

• 清除Vite和Storybook的缓存文件
• 重启Vite开发服务器与Storybook服务，确保所有配置变更生效

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