> ## 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 classes not applying in the editor's live preview

> 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.

If a page styled with Tailwind CSS classes, such as a [custom mode](/docs/organize/pages#custom) landing page, looks unstyled in the web editor's [live preview](/docs/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](/docs/deploy/preview-deployments), and local previews with [`mint dev`](/docs/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`](/docs/cli/commands#mint-dev) in your local repository.
* Save your changes to a branch and open a pull request. Mintlify builds a [preview deployment](/docs/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](/docs/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 theme={null}
<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](/docs/guides/custom-layouts) for complete examples.


## Related topics

- [Build custom page layouts](/docs/guides/custom-layouts.md)
- [Custom scripts](/docs/customize/custom-scripts.md)
- [Quickstart](/docs/quickstart.md)