> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

> 诊断为什么使用 Tailwind CSS 类设置样式的页面（例如自定义模式的落地页）在 Web 编辑器的实时预览中看起来没有样式，但在部署环境和 mint dev 中能正常渲染。

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

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

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

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

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

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

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

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

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

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

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

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


## Related topics

- [构建自定义页面布局](/docs/zh/guides/custom-layouts.md)
- [自定义脚本](/docs/zh/customize/custom-scripts.md)
- [Mintlify MDX 扩展](/docs/zh/cli/mdx-extension.md)