Tailwind v4 drops theme variables no utility uses, but page code also
reads tokens through var() and (--name) utilities, so the export keeps
them all. Two test assertions mixed && and || without parentheses.
- inspect.code {language: "tailwind"}: a layer tree as a React component
styled with Tailwind CSS v4 utilities, no stylesheet. Auto layout maps to
flex utilities on the spacing scale; fixed-width auto layout frames, text
and wide layers become fluid (w-full max-w-[…]); instances are inlined
with their overrides, except those connected to code (codeConnect), which
are their snippet with one import each; bound variables are theme
utilities (bg-accent, rounded-card).
- mobile: <frame id> (same layer names): mobile-first code, desktop classes
that differ behind lg:, resets for desktop defaults, padding compared per
side; layers only on desktop are hidden below lg, those only on mobile are
listed in the header.
- variable.export {format: "tailwind"}: @import "tailwindcss" and an @theme
block (--color-*, --radius-*, --text-*, --spacing-*, --font-*), names
unique per file and shared with page code.
Builds on the token roles of the CSS export px fix (#1008).
bflatastic