最可靠方式是 import 编译后的纯 css 文件（如 dist/tailwind.css），因 preview.js 无构建能力，无法处理 @tailwind 等语法；需先构建再导入，并验证 标签、红色方块渲染及 dark 类挂载。
preview.js 中直接 import 编译后的 Tailwind CSS 是最可靠的方式，前提是它已是纯 CSS 文件（如 dist/tailwind.css 或 node_modules/tailwindcss/tailwind.css），不是 src/index.scss 这类源文件。
为什么 import src/index.scss 会报错？
因为 preview.js 不是构建上下文，不经过 Webpack/PostCSS 处理，遇到 @tailwind base、@layer 或 $color-primary 这类语法会立刻抛出 You may need an appropriate loader 错误。
- ✅ 正确做法：先用
tailwindcss -i ./src/index.css -o ./dist/tailwind.css --minify构建出最终 CSS，再在preview.js中 import - ❌ 错误写法：
import '../src/index.scss'或import 'tailwindcss/base' - ⚠️ 注意：如果你用的是
tailwindcss/tailwind.css（官方发布的纯 CSS 包），那可以直接 import，它不含任何预处理器语法
如何确认 Tailwind 是否真正生效？
别只看控制台有没有报错——很多样式“看起来没加载”，其实是规则被覆盖或未命中 content 扫描范围。
- 打开浏览器开发者工具 → Elements 面板 → 找到 Storybook 预览 iframe 的
，检查是否有对应<style></style>标签（内容应含大量.bg-blue-500{...}类） - 手动在 story 中加一个
<div class="bg-red-500 w-4 h-4"></div>，观察是否渲染出红色方块；如果没颜色，说明 CSS 没注入或被重置样式清掉了 - 如果用了
modern-normalize.css等重置样式，确保它在 Tailwind 之前 import，否则border-style等基础属性可能被覆盖
暗模式下 Tailwind 类不切换？检查 .dark 类是否挂载到 body
Storybook 默认不会自动给 加 dark 类，而 Tailwind 的 dark: 变体依赖这个 class 触发样式切换（例如 dark:bg-gray-800）。
- 在
preview.js中 import 完 Tailwind 后，加上一行：document.documentElement.classList.add('dark')可临时验证暗色规则是否编译正确 - 正式方案需配合 Storybook 插件（如
@storybook/addon-themes）或自定义 decorator，在 story 渲染前动态设置document.body.classList.toggle('dark', isDark) - 注意：Tailwind 配置中必须启用
darkMode: 'class'（默认是'media'），否则dark:前缀不会生成对应规则
路径错误和构建时机错位是最常被忽略的两个点：import 路径必须以 .storybook/ 为基准向上跳转，且 CSS 文件必须在 Storybook 启动前就已存在——不能靠 preview.js 触发实时编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
