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 landing page, looks unstyled in the web editor's 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.

Mintlify scans each page for Tailwind classes and generates the matching CSS during a site build. Builds run for production deployments, preview deployments, and local previews with 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.

To check how a Tailwind-styled page renders, use a preview that includes a build:

• Run mint dev in your local repository.
• Save your changes to a branch and open a pull request. Mintlify builds a preview deployment 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 for working patterns.

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:

<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 for complete examples.

• Build custom page layouts
• Custom scripts
• Quickstart