tailwindlisted

# 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.__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 - Pinned runtime: `@tailwindcss/browser@4.2.4`. - Browser runtime script is injected by the CLI. Do not replace it with `cdn.tailwindcss.com`. - HyperFrames waits for `window.__tailwindReady` before frame capture starts. - The readiness shim must stay deterministic: no render-loop polling APIs, no clock-based retries, no runtime network fetches beyond the pinned Tailwind runtime script. - For offline, locked-down, or production-stable renders, compile Tailwind to CSS and include the stylesheet directly instead of relying on the browser runtime. ## v4 Rules Tailwind v4 is CSS-first: ```html <style type="text/tailwindcss"> @theme { --color-brand: oklch(0.68 0.2 252); --font-display: "Inter", sans-serif; } @utility