预览模式下样式不生效怎么办？

迷人的治博提问于 2026-03-03 03:56:18 阅读 48

交互

我在做可视化编辑器的预览功能，切换到预览模式后，原本在编辑区生效的 Tailwind 样式全没了，但 HTML 结构是对的。

我试过把 Tailwind 的 CDN 链接加到预览 iframe 的 head 里，也确认了类名没写错，比如 class="text-red-500" 这种。但就是不渲染样式，控制台也没报错，到底漏了啥？

可视化编辑预览模式

我来解答赞 16 收藏

反馈

2 条解答

设计师淇轩 Lv1

这个问题大概率是你用了 Tailwind 的 Play CDN 但没配置对。

Play CDN 需要告诉它要扫描哪些 HTML 才能生成对应的样式，直接引用是无效的。

解决方法很简单，在预览 iframe 的 head 里这样写：

或者更简单粗暴的方式，直接把 content 写成通配：

另外检查一下你的 iframe 标签有没有加 sandbox 属性，如果有的话，确保包含 allow-same-origin：

还有一个可能：你的预览内容是不是动态插入到 iframe 的？如果是，等插入后再执行 Tailwind 初始化。

基本上就是这三个地方排查：CDN 配置、sandbox 属性、加载时机。试试看。

2026-03-20 09:03

Top丶彦会 Lv1

Tailwind CDN 扫描时你还没把 HTML 塞进 iframe，样式表自然没生成。设置完内容后手动调用 tailwind.process() 强制它重新扫描就行了。

const iframe = document.querySelector('iframe');

iframe.contentDocument.body.innerHTML = yourHtml;

// 强制 Tailwind 重新解析 DOM 生成样式

iframe.contentWindow.tailwind.process();

2026-03-04 07:05