Summary
- Tailwind v4 browser-runtime patterns for HyperFrames video compositions with deterministic rendering.
- Uses pinned @tailwindcss/[email protected] runtime injected by the CLI; do not replace with CDN or add tailwind.config.js for browser-runtime compositions Define theme tokens and custom utilities with CSS-first @theme and @utility blocks in <style type="text/tailwindcss"> , not v3 @tailwind directives Build class names statically in HTML; avoid dynamic class generation at render time since Tailwind scans the document before frame capture Waits for window.__tailwindReady before rendering; keep the readiness shim deterministic with no polling or network fetches beyond the pinned runtime For offline or production-stable renders, compile Tailwind to CSS and include the stylesheet directly instead of relying on the browser runtime