Tailwind CSS for HyperFrames

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

Tailwind CSS for HyperFrames

HyperFrames init --tailwind uses the Tailwind browser runtime pinned to @tailwindcss/[email protected]. Treat that as Tailwind v4, not v3.

This skill is for composition HTML generated by the CLI. It is not for packages/studio, which still uses Tailwind v3 internally with tailwind.config.js, PostCSS, and @tailwind directives.

When To Use

- The user asks for Tailwind in a HyperFrames composition.

- A project was created with hyperframes init --tailwind.

- You see window.__tailwindReady in index.html.

- You need utility classes, CSS-first theme tokens, custom utilities, or v3-to-v4 migration guidance.

- The render has missing styles and the project is relying on the browser runtime.

Version Contract