Repository navigation
Conversation
The assistant screenshots set width and height through the style prop,
which our own guidance now tells users to avoid because it can cause a
layout shift on page load. Arbitrary values make the style prop
unnecessary here.
Verified in a mint dev build: the classes resolve to
.mint-w-\[268px\] { width: 268px } with matching CSS generated.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of DOC-426: use Tailwind on our own docs in place of custom CSS and
styleprops.In this PR so far
assistant/use.mdx: replaces thestyleprops on the assistant screenshots withw-[268px] h-auto. This change works.The bigger job is
playground.css(646 lines, all styling forsnippets/assistant-widget-playground.jsx). Two compiler bugs, described below, block a clean conversion, so it isn't in this PR yet.Compiler bugs found while probing
Tested in
mint dev(CLI 4.2.1171) with probe classes on the playground snippet, then reverted. Mintlify rewrites class names to amint-prefix at compile time, and these two cases go wrong there.1. Arbitrary properties get the prefix in the wrong place
[--pgx:#f8f8f8]mint-[--pgx:#f8f8f8]dark:[--pgx:#1c1c1c]dark:mint-[--pgx:#1c1c1c][clip-path:inset(50%)]mint-[clip-path:inset(50%)]This means CSS variables can't be set from Tailwind.
2. Any class containing a comma is dropped
The class isn't prefixed and no CSS is generated. No error is shown.
w-[min(100%,720px)]/w-[min(100%,_720px)]bg-[color-mix(in_srgb,var(--a),var(--b)_4%)]bg-[color:color-mix(in_srgb,#fcfcfc,#171717_4%)]dark:shadow-[0_0_0_1px_rgba(255,255,255,0.12)]This rules out
rgba(),min()/max()/clamp(),color-mix(), and every multi-layerbox-shadow. Ourcustom-scripts.mdxtells customers arbitrary values work, so customers hit this too.Working for comparison
All of these generated correct CSS:
dark:(:is(.dark *)),has-[input:focus-visible]:,data-[active=true]:,group-data-[open=true]/pg:,[&_svg]:,[&>span]:,[&[hidden]]:,motion-reduce:,max-[540px]:,min-[541px]:,animate-[spin_700ms_linear_infinite](resolves tomint-spinkeyframes),shadow-[0_0_0_1px_var(--x)],text-[13px]/[20px], and classes inside both branches of a ternary in a template literal.Plan for the playground
Unless the bugs above get fixed first, keep about 60 lines of CSS: light/dark color and shadow tokens, plus the preview-page rules that hide Mintlify's own chrome (which have to stay CSS). Move layout, spacing, type, and states into Tailwind classes that reference the tokens.
🤖 Generated with Claude Code