应直接导入编译后的Tailwind CSS文件（如'../dist/tailwind.css'或'tailwindcss/tailwind.css'），避免引入含@tailwind指令的源文件；确保tailwind.config.js的content包含Storybook路径（如"./storybook/*/.{js,ts,jsx,tsx}"）；禁用动态类名拼接，改用静态类或clsx/twMerge白名单；SCSS中使用@apply时须配置postcss-loader并确保路径正确。
直接 import 编译后的 Tailwind CSS 到 preview.js
只要你的 Tailwind 已完成构建（比如执行过 npm run build:tailwind 或通过 PostCSS 流程输出了纯 CSS），就能在 .storybook/preview.js 里安全导入，这是最快生效的方式。
常见错误是误引未编译的 src/index.css —— 它含 @tailwind base 指令，而 preview.js 不走构建流程，JS 运行时根本无法解析，直接报 You may need an appropriate loader 错误。
- ✅ 正确路径示例：
import '../dist/tailwind.css'（假设你用sass+postcss手动编译到了dist/） - ✅ 也支持官方发布的包：
import 'tailwindcss/tailwind.css' - ❌ 错误写法：
import '../src/index.css'（含@tailwind指令） - ❌ 错误写法：
import './src/style/main.scss'（preview.js不处理 Sass 变量或@mixin）
确保 tailwind.config.js 的 content 覆盖 Storybook 文件路径
Tailwind JIT 模式靠静态扫描生成类名，如果它没看到你的 .stories.tsx 文件，md:flex、hover:bg-blue-500 这些响应式或伪类样式就压根不会出现在最终 CSS 里。
检查 tailwind.config.js 中 content 数组是否包含 Storybook 相关路径：
立即学习“前端免费学习笔记（深入）”；
- 必须以
./开头："./storybook/**/*.{js,ts,jsx,tsx}"✅ - 不能写成
"storybook/**/*"或"../storybook/**/*"❌（Tailwind 会忽略） - 如果你把 stories 放在
src/stories/，也要加进去："./src/stories/**/*.{js,ts,jsx,tsx}" - 改完必须重启 Storybook：热重载不触发 JIT 重新扫描
避免在 Story 文件中拼接动态类名
写 class={`text-${size}-lg`} 在 Storybook 预览里必然失效 —— Tailwind 是静态分析工具，它只看到字面量 text-${size}-lg，不会执行 JS 模板字符串去推导 sm/md 等具体值。
这不是配置问题，是机制限制。临时验证可用这个办法：
- 在 story 里硬写几个静态变体：
class="text-sm-lg"、class="text-md-lg"，看是否生效 - 长期方案：用
clsx或twMerge+ 白名单数组，例如const sizes = ['sm', 'md', 'lg']; sizes.map(s => `text-${s}-lg`) - 演示不同尺寸？直接建多个 story，别在一个 story 里靠变量切换
别让 @apply 在预览中变成注释
如果你的组件样式写在 .scss 文件里并用了 @apply，默认 Webpack 配置只会跑 sass-loader，跳过 postcss-loader，结果 @apply 被原样保留，最终 CSS 里啥都没生成。
必须手动把 postcss-loader 插入 SCSS 处理链，且顺序严格为：sass-loader → postcss-loader → css-loader：
- 确认
.storybook/webpack.config.js中postcss-loader的config.path指向含postcss.config.cjs的目录（通常是项目根目录） -
include路径要覆盖src/和storybook/，不能只写./storybook - 检查
postcss.config.cjs是否已正确引入tailwindcss插件
真正容易被忽略的是：所有路径都得从 .storybook/ 目录出发计算，哪怕只是多一个点、少一个点，都会导致样式加载失败或构建静默跳过。
