# Tailwind 类在编辑器实时预览中不生效 (/zh/help-center/tailwind-classes-not-applying-in-editor-preview)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 332 · updated: 2026-09-23 -->

如果使用 Tailwind CSS 类设置样式的页面（例如[自定义模式](/zh/organize/pages#custom)的落地页）在 Web 编辑器的[实时预览](/zh/editor/review#live-preview)中看起来没有样式，你的标记很可能是正确的。实时预览渲染内容时不经过构建步骤，因此不会为页面特有的 Tailwind 类生成 CSS。

<div id="why-the-live-preview-looks-unstyled">
  ## 为什么实时预览看起来没有样式 [#为什么实时预览看起来没有样式]
</div>

Mintlify 会扫描每个页面中的 Tailwind 类，并在站点构建期间生成匹配的 CSS。生产部署、[预览部署](/zh/deploy/preview-deployments)以及使用 [`mint dev`](/zh/cli/commands#mint-dev) 的本地预览都会运行构建。实时预览为了实现即时渲染而跳过了构建步骤，因此那里永远不会为你的 Tailwind 类生成 CSS。

如果你在实时预览中检查某个元素，Tailwind 类会带着 `mint-` 前缀出现在 HTML 中，但没有任何 CSS 规则与之匹配。

<div id="see-your-styles-rendered-accurately">
  ## 查看样式的准确渲染效果 [#查看样式的准确渲染效果]
</div>

要检查使用 Tailwind 设置样式的页面的渲染效果，请使用包含构建步骤的预览：

* 在本地仓库中运行 [`mint dev`](/zh/cli/commands#mint-dev)。
* 将更改保存到分支并创建拉取请求。Mintlify 会构建带有可共享 URL 的[预览部署](/zh/deploy/preview-deployments)。
* 发布更改并查看线上站点。

如果页面在上述任一预览中仍然显示异常，则问题出在页面本身。参阅[构建自定义页面布局](/zh/guides/custom-layouts)了解可行的模式。

<div id="custom-mode-pages-have-no-default-typography">
  ## 自定义模式页面没有默认排版样式 [#自定义模式页面没有默认排版样式]
</div>

与实时预览的行为无关，自定义模式本身就是一块空白画布。Mintlify 不会为自定义模式页面应用默认排版样式，因此诸如 `<h2>` 和 `<p>` 之类的原生 HTML 元素在所有预览和部署中都会以浏览器默认样式渲染。请为它们显式设置样式：

```mdx title="Example styled heading"
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
  Features
</h2>
```

这是预期行为，不是渲染缺陷。参阅[构建自定义页面布局](/zh/guides/custom-layouts)获取完整示例。