Skip to main content
如果使用 Tailwind CSS 类设置样式的页面（例如自定义模式的落地页）在 Web 编辑器的实时预览中看起来没有样式，你的标记很可能是正确的。实时预览渲染内容时不经过构建步骤，因此不会为页面特有的 Tailwind 类生成 CSS。

​
为什么实时预览看起来没有样式

Mintlify 会扫描每个页面中的 Tailwind 类，并在站点构建期间生成匹配的 CSS。生产部署、预览部署以及使用 mint dev 的本地预览都会运行构建。实时预览为了实现即时渲染而跳过了构建步骤，因此那里永远不会为你的 Tailwind 类生成 CSS。 如果你在实时预览中检查某个元素，Tailwind 类会带着 mint- 前缀出现在 HTML 中，但没有任何 CSS 规则与之匹配。

​
查看样式的准确渲染效果

要检查使用 Tailwind 设置样式的页面的渲染效果，请使用包含构建步骤的预览：
  • 在本地仓库中运行 mint dev。
  • 将更改保存到分支并创建拉取请求。Mintlify 会构建带有可共享 URL 的预览部署。
  • 发布更改并查看线上站点。
如果页面在上述任一预览中仍然显示异常，则问题出在页面本身。参阅构建自定义页面布局了解可行的模式。

​
自定义模式页面没有默认排版样式

与实时预览的行为无关，自定义模式本身就是一块空白画布。Mintlify 不会为自定义模式页面应用默认排版样式，因此诸如 <h2> 和 <p> 之类的原生 HTML 元素在所有预览和部署中都会以浏览器默认样式渲染。请为它们显式设置样式：
Example styled heading
这是预期行为，不是渲染缺陷。参阅构建自定义页面布局获取完整示例。

相关主题

构建自定义页面布局自定义脚本Mintlify MDX 扩展