feat(mix-tailwinds): add the mix_tailwinds landing page - #50
Merged
Conversation
A developer-facing page for the package: what it does, the components it builds, and the API, rather than a parity report. - Hero pairs the thesis with a draggable seam over two real captures of the same class string — a browser rendering Tailwind 4.3.1 on one side, Flutter rendering mix_tailwinds on the other. Narrow screens load the phone-width captures, since the desktop ones shrink past legibility. - Example gallery shows five real components with the class string that produced each one. - Side-by-side HTML and Dart using the functional API, highlighted with the shiki languages already bundled by HighlightedCode. - Accents are scoped to .mtw-root rather than html[data-product], because this is a page inside the Mix site and not a new product in the navbar switcher. The seam is a native range input, so pointer, touch, keyboard, and screen reader support come from the platform.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…line The Dart pane split its class strings with adjacent-literal concatenation to fit the pane width, which put Dart plumbing next to the markup it is meant to mirror. The class string is the thing being demonstrated, so the panes are sized to it instead: the API section runs to 1320px and each snippet keeps every class on one line. Also swaps in a responsive prefix and a state variant, so the example carries md: and hover: rather than only static utilities. The code size is left at 14px. HighlightedCode pins it with an important utility inside a cascade layer, and layered important declarations outrank unlayered ones regardless of specificity.
The Flutter renders of launch-command, incident-room, and release-timeline carried a badge that sat below where CSS puts it. mix_tailwinds now honors align-self, so the captures are regenerated from the same comparison run.
leoafarias
force-pushed
the
feat/mix-tailwinds-landing
branch
from
August 8, 2026 17:38
9995c29 to
9531841
Compare
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.
Summary
Adds
/mix-tailwinds— a developer landing page for the package, following the existing standalone-product route pattern (naked-ui,stargate,rockets): a thinsrc/app/<product>/page.tsxrendering a landing component that reuses the sharedlanding.csssystem,Aurora,SectionHead,LandingButton, and the motion presets.It's written as a page that sells the package to developers — what it does, what it builds, how the API reads — rather than a parity report. There are no pixel-diff percentages or pass/fail tables on it.
What's on the page
mix_tailwindson the right. The captures come from the package's own comparison suite, so nothing on the page is a mockup.div(),p(),h2(),button()), so the Dart reads like the markup it replaces.onDiagnosticrather than dropped silently.Notable decisions
Accent scoped to
.mtw-root, nothtml[data-product]. The sibling pages define their accents under a product attribute, which also puts them in the navbar product switcher and the global background rules. mix_tailwinds is a package inside Mix, not a separate product identity, so its tokens live on the page root and cascade to the shared components rendered inside it. No changes toFloatingNavbar,layout.jsx, orglobals.css. A test pins this.Iris accent (
#7c6cff) with jade (#2dd4a7) as secondary. The blue-to-cyan range is already taken by stargate, code-analysis, voyager, and naked-ui. Iris sits between Flutter's blue and web tooling's magenta, which suits a translation layer, and the iris→jade gradient reads as two systems meeting.Monospace as the display face. For a utility-class product the class string is the logo, the headline, and the demo at once, so JetBrains Mono carries the headings and Inter carries prose. It's the one deliberately unusual move on the page.
HighlightedCodegainedhtmlanddart. Additive only — the two languages are added to the shiki bundle and the prop union. Shiki was already a dependency and ships both grammars, so no new package.Responsive captures. Below 720px the desktop capture shrinks past readability, so the phone-width captures load through
<picture>, with per-example aspect ratios passed as custom properties so frames never reflow while loading.Accessibility. The seam is a native
<input type="range">, so pointer, touch, keyboard, and screen-reader support come from the platform rather than a custom drag implementation; both captures carry descriptive alt text, the picker is a proper tab list, andMotionConfig reducedMotion="user"is respected.Test plan
npm run test:site— 38 pass, including a newsite-tests/mix-tailwinds-integration.test.mjscovering the route wiring, the token scoping (and that no global product routing was touched), the absence of parity/diff language, the functional-API snippets, the html/dart highlighting, the presence of all 20 captures, and the seam's a11y attributes.npm run build— succeeds;/mix-tailwindsprerenders.next linton the new directories — clean.Follow-up
The captures are committed PNGs (~2MB total) regenerated by the package's
compare:advancedscript. If the page later needs live Flutter,mix_docs_previewalready depends onmix_tailwindsand has anecosystem/mix_tailwinds.dartentry — but that path is gated on a new package release, since the pub dependency is still0.0.1-alpha.1and the functional API shown here is unpublished. The static captures avoid that gate entirely.