Storybook中Tailwind暗黑模式：组件画布视图异常，文档视图正常

• 检查组件内的暗黑模式样式冲突

  • 查看组件是否针对dark类设置了opacity: 0、visibility: hidden或display: none这类隐藏属性，尤其注意JS动态控制的类名
  • 检查父元素是否因dark类触发overflow: hidden或高度塌陷，导致组件被挤出可视区域
  • 用浏览器控制台对比暗黑/正常模式下组件及父元素的计算样式，重点关注display、visibility、opacity、position、z-index属性

• 验证Tailwind暗黑模式配置

  • 确认Tailwind配置中darkMode设为'class'（插件通过body的dark类生效，若为'media'会导致类名逻辑失效）
  • 排查是否存在自定义暗黑变体覆盖默认行为，比如组件用了非dark:前缀的自定义类名

• 检查Canvas视图容器的样式干扰

  • Canvas视图有专属嵌套容器（如#root、.sb-canvas），查看这些容器在dark类下是否有特殊样式，比如背景色与组件内容色重合导致视觉空白
  • 临时给组件强制设置高对比度样式（如background: red; color: black;），验证是否因颜色重合导致“看不见”

• 排查组件渲染逻辑与生命周期

  • 若组件用了框架生命周期钩子，检查暗黑模式切换（body类变化）是否触发错误状态更新，比如意外隐藏组件
  • 查看组件是否依赖全局主题状态，而Canvas视图未同步该状态导致渲染异常
  • 在组件故事中手动给根元素添加dark类，替代插件自动添加，判断是插件触发时机问题还是组件本身问题

• 检查插件与Storybook版本兼容性

  • 确认storybook-tailwind-dark-mode插件版本与当前Storybook主版本匹配，版本不兼容可能引发DOM操作异常（比如插件在组件渲染完成前添加dark类，导致样式计算错误）
  • 尝试更新或回退插件版本，测试问题是否消失

• 排查CSS加载顺序

  • 检查组件样式、Tailwind全局样式、Storybook预设样式的加载顺序，是否存在dark类样式被后续样式覆盖的情况
  • 在preview.js中调整样式导入顺序，确保Tailwind样式优先于组件样式加载

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