tailwind
Installation
Summary
Tailwind v4 browser-runtime patterns for HyperFrames video compositions with deterministic rendering.
- Uses pinned
@tailwindcss/browser@4.2.4runtime injected by the CLI; do not replace with CDN or addtailwind.config.jsfor browser-runtime compositions - Define theme tokens and custom utilities with CSS-first
@themeand@utilityblocks in<style type="text/tailwindcss">, not v3@tailwinddirectives - Build class names statically in HTML; avoid dynamic class generation at render time since Tailwind scans the document before frame capture
- Waits for
window.__tailwindReadybefore 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
SKILL.md
Tailwind CSS for HyperFrames
HyperFrames init --tailwind uses the Tailwind browser runtime pinned to @tailwindcss/browser@4.2.4. 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.__tailwindReadyinindex.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
Explore more of GLSRM