Tailwind 类在编辑器实时预览中不生效

如果使用 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 元素在所有预览和部署中都会以浏览器默认样式渲染。请为它们显式设置样式：

<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
  Features
</h2>

这是预期行为，不是渲染缺陷。参阅构建自定义页面布局获取完整示例。