Document className and Tailwind arbitrary value support

[ethanpalm]

Summary

className now works on all built-in components (mint#10540) and dynamic Tailwind utilities work inside it (mint#6737). Two of our pages stated the opposite: both told users that Tailwind arbitrary values are unsupported and to use the style prop instead.

Resolves DOC-316 and DOC-317. DOC-317 was blocked by ENG-7289, which shipped as mint#10540.

Changes

Corrections

• customize/custom-scripts and guides/custom-layouts no longer claim arbitrary values are unsupported.
• create/image-embeds teaches Tailwind classes for resizing instead of inline style.
• components/callouts said typed callouts accept only children.

New guidance

• A className and arbitrary value section in custom-scripts, covering variants, the runtime-class limitation, and the Tab content-panel caveat.
• A "Style components" section on the components overview.
• className property rows on every component reference page that supports it, plus the three components that don't: Banner, MDX, Visibility.
• Inline Markdown support in component title props.
• A help center article for Tailwind classes not applying in the editor's live preview, carried over from Update from support feedback: editor preview Tailwind and custom mode styling #7257.

Verification

Every behavioral claim was checked against a real mint dev build rather than taken from PR descriptions, since #4938 had to be reverted for documenting className support that didn't exist yet.

A test page with <Note className="w-[453px] lg:w-[calc(100%-2rem)] bg-[#0f172a] !mt-0 data-[state=open]:bg-black/50"> produced:

.\!mint-mt-0 { margin-top: 0px !important }
.mint-w-\[453px\] { width: 453px }
.mint-bg-\[\#0f172a\] { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)) }
.data-\[state\=open\]\:mint-bg-black\/50[data-state="open"] { background-color: rgb(0 0 0 / 0.5) }

Component coverage was confirmed by reading each component's source in mintlify/mint, not from the PR description. The live preview limitation was confirmed too: getDynamicTailwindCss is only called from the client's static-props paths, never from the dashboard live-preview compile route.

mint broken-links, mint a11y, and vale are clean. All changed pages return 200 in mint dev.

Supersedes

• Update from code changes: document className prop on components #7165 — same goal, but it left the contradictory arbitrary-values sentence in place, and its branch still carries a stray <Accordion title="robert"> test block in quickstart.mdx plus unrelated ai-native.mdx edits.
• Update & deprecate from code: className prop and Markdown titles #7180 — closed Aug 31. Its prop-table rows, callouts fix, and title Markdown finding are included here.
• Update from support feedback: editor preview Tailwind and custom mode styling #7257 — its English content is included here. Close it if this merges, or tell me and I'll rebase it instead.

Areas for review

• Translations. English only, per our convention that translations run automatically after merge. Both bot PRs hand-edited es/fr/zh; I did not.
• RequestExample / ResponseExample. I left components/examples alone. Those get extracted at compile time into the panel and I couldn't confirm className reaches the rendered element.
• Snippets. Tailwind selectors are generated from the page's own source (getMdx.ts), so a class that appears only inside a snippet file may never get the mint- prefix. I did not document this because I haven't tested it, but it's worth confirming with Brandon — it may be a bug rather than intended behavior.
• Vale. Added className, keyframes?, and unstyled to the vocabulary and className to the Headings exceptions, rather than reword correct prose.

🤖 Generated with Claude Code

---

Note

Low Risk
Documentation-only changes with no runtime or product code; risk is limited to possible inaccuracies in behavioral claims.

Overview
Updates Mintlify docs to match shipped className on built-in components and Tailwind arbitrary values, replacing guidance that told authors to use inline style or claimed arbitrary utilities were unsupported.

customize/custom-scripts and guides/custom-layouts now cover styling components via className, arbitrary values and variants, writing class names literally (not assembled at runtime), and avoiding the style prop. create/image-embeds resizes images with Tailwind instead of JSX style. Component reference pages add className where supported, note inline Markdown on title props, and call out exceptions (Banner, MDX, Visibility). components/index adds a Style components section.

A new help center article explains why Tailwind can look unstyled in the web editor live preview (no per-page CSS generation without a build); docs.json links it. skill.md and Vale vocab/heading exceptions are updated for the new terminology.

^{Reviewed by Cursor Bugbot for commit 167885a. Bugbot is set up for automated code reviews on this repo. Configure here.}

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
mintlify	🟢 Ready	View Preview	Sep 8, 2026, 11:44 PM

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
tomee	🟡 Building	–	Sep 8, 2026, 11:42 PM

💡 Tip: Enable Automations to automatically generate PRs for you.