Tailwind样式在Storybook中“找不到”的根本原因是：postcss-loader未接入SCSS处理链导致@apply失效、content路径未覆盖.stories文件致JIT漏扫、动态类名如text-${size}-lg被JIT跳过，且所有配置修改后必须重启Storybook才能生效。
Storybook 里 Tailwind 样式“找不到”，不是 CSS 文件没加载，而是 Tailwind 根本没生成对应类名的规则——postcss-loader 没插进 SCSS 链、content 路径漏扫 .stories.ts、动态类名如 text-${size}-lg 被 JIT 直接跳过。
postcss-loader 没接入 SCSS 处理链，@apply 完全失效
你写了 @apply p-4 bg-blue-500，但最终 CSS 里只有空行或注释。这是因为 Storybook 默认只用 sass-loader 编译 .scss，根本没经过 postcss-loader，@apply 就被当作文本原样保留。
- 必须在
.storybook/webpack.config.js的rules中显式插入postcss-loader，顺序严格为：sass-loader→postcss-loader→css-loader -
include必须覆盖组件源码和 Storybook 文件路径，例如：include: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../storybook')] - 确认
postcss-loader的config.path指向包含postcss.config.cjs的目录（通常是项目根或.storybook）
tailwind.config.js 的 content 没扫到 stories 文件
md:flex、hover:bg-blue-500 这些类名渲染出来是空白，不是写错了，是 Tailwind JIT 根本没生成它们的 CSS 规则。
- 检查
tailwind.config.js的content数组是否包含："./storybook/**/*.{js,ts,jsx,tsx,vue}"（注意必须以./开头） - 如果用了自定义 stories 目录（如
src/stories），也要加进去："./src/stories/**/*.{js,ts,jsx,tsx,vue}" - 修改后必须重启 Storybook，热重载不会触发 JIT 重新扫描
class={`text-${size}-lg`} 渲染为空白
Tailwind 不执行 JS，它只扫描源码里的字面量字符串。text-${size}-lg 在构建时就是个模板字符串，JIT 看不到 text-sm-lg 或 text-md-lg 的实际值。
- 临时验证：把变量展开成固定字符串，比如
class="text-sm-lg text-md-lg"，看是否生效 —— 如果生效，就是动态类名问题 - 长期方案：改用
clsx或twMerge，配合白名单预定义，例如：const sizes = ['sm', 'md', 'lg']; sizes.map(s => `text-${s}-lg`) - 避免在 story 文件中直接拼接带插值的
class字符串；演示变体时优先用args控制固定类名组合
preview.js 里 import 的 CSS 没注入到预览 iframe
preview.js 只接受纯 CSS 字节流，不能处理未编译的 SCSS、Sass 变量或 @import url()。它不是构建上下文，只是运行时注入。
- 路径必须从
.storybook/目录出发计算，例如项目结构是src/style/tailwind-output.css，写法是：import '../src/style/tailwind-output.css' - 不要
import '../src/style/index.scss'—— 这会报错：You may need an appropriate loader to handle this file type - 确认生效方式：打开任意 Story，检查预览
的中是否出现了对应标签，而不是只看控制台有没有报错
最容易被忽略的是：所有配置修改后都必须重启 Storybook，不是刷新页面、不是热重载、不是 Ctrl+S 保存就完事——JIT 扫描、PostCSS 插件链、Webpack 模块缓存，全靠进程重启才能彻底重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
