mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
d14fddabf6
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
36 lines
2.4 KiB
Plaintext
36 lines
2.4 KiB
Plaintext
---
|
|
title: "Tailwind classes not applying in the editor's live preview"
|
|
description: "The web editor's live preview skips the build step that generates CSS for Tailwind classes. Check styling with mint dev or a preview deployment."
|
|
keywords: ["tailwind not working", "tailwind classes not applying", "custom page looks broken", "editor preview unstyled", "live preview missing styles", "custom mode no styles"]
|
|
---
|
|
|
|
If a page styled with Tailwind CSS classes, such as a [custom mode](/organize/pages#custom) landing page, looks unstyled in the web editor's [live preview](/editor/review#live-preview), your markup is probably correct. The live preview renders your content without a build step, and it does not generate the CSS for page-specific Tailwind classes.
|
|
|
|
## Why the live preview looks unstyled
|
|
|
|
Mintlify scans each page for Tailwind classes and generates the matching CSS during a site build. Builds run for production deployments, [preview deployments](/deploy/preview-deployments), and local previews with [`mint dev`](/cli/commands#mint-dev). The live preview skips the build step so that it can render instantly, so it never generates the CSS for your Tailwind classes.
|
|
|
|
If you inspect an element in the live preview, the Tailwind classes appear in the HTML with a `mint-` prefix, but no CSS rules match them.
|
|
|
|
## See your styles rendered accurately
|
|
|
|
To check how a Tailwind-styled page renders, use a preview that includes a build:
|
|
|
|
- Run [`mint dev`](/cli/commands#mint-dev) in your local repository.
|
|
- Save your changes to a branch and open a pull request. Mintlify builds a [preview deployment](/deploy/preview-deployments) with a shareable URL.
|
|
- Publish your changes and check your live site.
|
|
|
|
If the page still looks wrong in one of these previews, the problem is in the page itself. See [Build custom page layouts](/guides/custom-layouts) for working patterns.
|
|
|
|
## Custom mode pages have no default typography
|
|
|
|
Separately from the live preview behavior, custom mode is a blank canvas. Mintlify does not apply its default typography to custom mode pages, so native HTML elements such as `<h2>` and `<p>` render with browser default styles on every preview and deployment. Style them explicitly:
|
|
|
|
```mdx Example styled heading
|
|
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
|
|
Features
|
|
</h2>
|
|
```
|
|
|
|
This is expected behavior, not a rendering bug. See [Build custom page layouts](/guides/custom-layouts) for complete examples.
|