fix: replace Mintlify-unsupported Tailwind styles with custom CSS - #465
Merged
Conversation
Mintlify's production build only supports Tailwind v3 classes without arbitrary values, and its Tailwind v4 @Property registrations break v3 gradient utilities entirely (stops fall back to transparent). This left the sign-up CTA invisible in production while looking fine in mint dev. - sign-up-cta: move all styling to style.css (.sign-up-cta classes) - cli-tip: replace text-[#0075FF] with a.cli-tip-link in style.css - setup-flow: move dark:bg-white/[0.02] and min-h-[64px] into the component's own style block
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
The arbitrary text-[#0075FF] value renders fine in production today, so leave it untouched and scope this PR to the actually broken styles.
Its arbitrary values render fine in production today; scope this PR to the actually broken sign-up CTA.
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
1 participant
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.
Problem
The sign-up CTA (
snippets/sign-up-cta.mdx, used on ~10 /learn/playwright pages) rendered as white text on a white background in production, while looking fine inmint dev.Root cause: Mintlify's production build mixes Tailwind versions. It generates Tailwind v3-style utilities from our class names, but the page also registers Tailwind v4 typed CSS properties:
The v3 gradient utility writes
#0c449a var(--tw-gradient-from-position)into that variable — invalid as a<color>— so the browser falls back to transparent. Any gradient utility (from-*/via-*/to-*, standard or arbitrary) is broken in production. Separately, Mintlify's docs only support Tailwind v3 without arbitrary values, and recommend custom CSS files instead.Fix
Move the CTA's styling into CSS we control (shipped verbatim to prod): all styling moved to
style.cssas.sign-up-ctaclasses (gradient, colors, stretched-link click area), and the snippet markup reduced to those class names.cli-tip.jsxandsetup-flow.jsxalso use arbitrary values, but they render correctly in production today, so they stay untouched.Remaining Tailwind utilities in these components are core v3 classes, which Mintlify supports.
Verification
Verified in
mint devvia computed styles and screenshots: CTA gradientrgb(12,68,154) → rgb(6,32,71)with whole-card click overlay. Since the styling no longer depends on Mintlify's Tailwind pipeline, dev and prod can't diverge for this component.Affected routes
All 46
/learn/playwright/*guide pages that embed the sign-up CTA:Full list