Tailwind CSS 在 Storybook 中预览失败主因是构建链路未对齐：postcss-loader 未介入 SCSS 流程、tailwind.config.js 的 content 未覆盖 stories 路径、动态类名被 JIT 静态扫描忽略。
Tailwind CSS 在 Storybook 中预览失败，90% 的情况不是 Tailwind 本身有问题，而是构建链路没对齐——postcss-loader 没介入 SCSS 处理流程、tailwind.config.js 的 content 没覆盖 stories 路径、或动态类名被 JIT 静态扫描机制直接忽略。
为什么 @apply 和响应式类（如 md:flex）在 Storybook 里不生效
Storybook 默认只用 sass-loader 编译 .scss 文件，跳过了 postcss-loader，导致 @apply 被当作文本原样保留，md:flex 这类规则根本没生成。
- 必须在
.storybook/main.js的webpackFinal配置中显式插入postcss-loader，顺序严格为：sass-loader → postcss-loader → css-loader -
include路径要同时包含src/和.storybook/（不能只写./storybook） - 确认
postcss-loader的config.path指向项目根目录下的postcss.config.cjs（或等效配置文件）
tailwind.config.js 的 content 路径为什么总漏掉 Storybook 文件
哪怕你写了 "./src/**/*.{js,ts,jsx,tsx}"，只要没明确包含 Storybook 故事文件路径，JIT 就不会扫描它们，md:flex、hover:bg-blue-500 全部失效。
-
content数组必须显式加入："./.storybook/**/*.{js,ts,jsx,tsx}"（注意开头的./） - 如果故事文件放在
src/stories/或stories/，也要加进去，例如："./src/stories/**/*.{js,ts,jsx,tsx}" - 修改后必须重启 Storybook（热重载不触发 JIT 重新扫描）
class="text-${size}-lg" 这类动态类名为什么完全空白
Tailwind 的 JIT 是静态分析器，它不执行 JS 字符串插值。你在 .stories.tsx 里写的 class={`text-${size}-lg`}，对它来说只是字面量 text-${size}-lg，没有具体值，就不会生成任何对应规则。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：把变量展开成固定类名，比如
class="text-sm-lg text-md-lg"，看是否生效 - 长期方案：改用
clsx或twMerge，配合白名单数组（如const sizes = ['sm', 'md', 'lg']），再拼出安全类名 - 避免在 Story 文件中直接使用带插值的 class 字符串；演示变体时优先用
args控制固定类名
preview.js 里 import tailwind.css 为什么有时没效果
能 import 的必须是**已编译完成的纯 CSS**，不是源文件。比如 import 'tailwindcss/tailwind.css' 可行，但 import './src/index.scss' 必然失败——preview.js 不是构建上下文，无法处理 @tailwind 指令。
- 推荐做法：确保
tailwind.config.js的content已正确配置后，用npx tailwindcss -i ./src/input.css -o ./dist/tailwind.css --minify构建产物，再在preview.js中import '../dist/tailwind.css' - 别用
import 'tailwindcss/base.css'—— 这个路径在 Node 模块解析中通常找不到 - 验证是否注入成功：打开任意 Story，在 Elements 面板里找到预览
<iframe></iframe>，展开其，检查是否有对应<style></style>标签，且内容含.md\:flex等规则
真正容易被忽略的是 JIT 扫描路径和 loader 插入顺序这两个点——它们不出错，但一错就全黑，连控制台都安静得诡异。
