Setting the file. One moment.
Subchapter 21.8
references/tailwind.mdMarkdown4 KBView on GitHub
HyperFrames init --tailwind uses the Tailwind browser runtime pinned by the scaffold. Treat it as Tailwind v4, not Studio’s Tailwind v3 setup.
@tailwindcss/browser@4.2.4 (source of truth: packages/cli/src/commands/init.ts TAILWIND_BROWSER_VERSION).cdn.tailwindcss.com (unpinned, defeats reproducibility).window.__tailwindReady before frame 0 capture.Tailwind v4 is CSS-first:
<style type="text/tailwindcss">
@theme {
--color-brand: oklch(0.68 0.2 252);
--font-display: "Inter", sans-serif;
}
@utility headline-balance {
text-wrap: balance;
letter-spacing: 0;
}
</style>Avoid v3-only patterns in browser-runtime compositions:
@tailwind base;
@tailwind components;
@tailwind utilities;Do not add tailwind.config.js only for composition colors, fonts, spacing, or utilities. Use @theme and @utility.
@config / @plugin abort the browser compile. The pinned @tailwindcss/browser build does not support JS config or plugins. Theme and utilities stay in a text/tailwindcss block.
Use Tailwind for static layout and style. Keep render-critical timing in GSAP or another seekable HyperFrames adapter.
<section
id="hero"
class="clip absolute inset-0 grid place-items-center bg-zinc-950 text-white"
data-start="0"
data-duration="5"
data-track-index="1"
>
<div class="w-[1280px] max-w-[82vw] text-center">
<h1 class="text-7xl font-black leading-none text-balance">Render-ready Tailwind</h1>
</div>
</section>For repeated items, parameterize via CSS variables — keep the class list static so the runtime sees every utility:
<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 0"></span>
<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 1"></span>
<span class="translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 2"></span>The browser runtime scans classes it can see. Do not build render-critical class names only at seek time:
// Risky: the runtime may never see every generated class.
element.className = `bg-${color}-500`;Prefer complete class tokens in HTML, data variants, or explicit CSS:
<div data-tone="blue" class="bg-blue-500 data-[tone=rose]:bg-rose-500"></div>If a generated class is unavoidable, make sure the full class token appears in a text/tailwindcss block before validation.
v4 + render-mode footguns. Every bullet is a hard rule:
w-[…] / h-[…] / aspect-video / grid / flex. No md: / lg: breakpoints (renderer is fixed-viewport).translate-*, scale-*, opacity-* are seek-safe; animating Tailwind sizing utilities is not.transition-* for render-critical motion — a seekable runtime (GSAP) must own the state.hover: / focus: / active: / group-*: / peer-*: / scroll / pointer variants never fire during render.border is broken in v4 — v4 default is currentColor (v3 was gray-200). Always write the color: border border-white/20.shadow-sm → shadow-xs, rounded-sm → rounded-xs, outline-none → outline-hidden, flex-shrink-* → shrink-*, flex-grow-* → grow-*.color-mix(), container queries, logical properties work; the renderer is current Chrome.npx hyperframes check
# Render proof — frame 0 must NOT flash unstyled content. Preview alone can hide this.
npx hyperframes render . --workers 1 --quality draft --output tailwind-proof.mp4