From hyperframes
Provides Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Guides scaffolding/editing hyperframes init --tailwind projects, utility classes in HTML, CSS-first theme tokens, v3-v4 debugging, and runtime vs compiled CSS decisions.
npx claudepluginhub ilderaj/agent-plugin-marketplace --plugin codex--hyperframesThis skill uses the workspace's default tool permissions.
HyperFrames `init --tailwind` uses the Tailwind browser runtime pinned to `@tailwindcss/browser@4.2.4`. Treat that as Tailwind v4, not v3.
Provides expert guidance for Tailwind CSS v4 including CSS-first configuration, custom utilities/variants, ESLint integration, and best practices for layouts, spacing, and responsive design.
References Tailwind CSS for utility classes, responsive design, theme variables, flexbox, grid layouts, positioning, and variants. Use for utility-first web app styling.
Provides Tailwind CSS patterns including layout decision trees, responsive breakpoints, container queries, dark mode, animations, and v4 migration guidance.
Share bugs, ideas, or general feedback.
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.
hyperframes init --tailwind.window.__tailwindReady in index.html.@tailwindcss/browser@4.2.4.cdn.tailwindcss.com.window.__tailwindReady before frame capture starts.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 setup patterns in browser-runtime compositions:
/* Do not use these in Tailwind v4 browser-runtime compositions. */
@tailwind base;
@tailwind components;
@tailwind utilities;
Do not add a tailwind.config.js just to define colors, fonts, spacing, or utilities for a v4 browser-runtime composition. Use @theme and @utility in a text/tailwindcss style block.
If you truly need an existing JavaScript config for a compiled v4 build, load it explicitly from CSS with @config, then validate in the browser. Do not assume v4 auto-detects v3 config files.
Keep Tailwind responsible for static layout and visual style. Keep motion timing in GSAP or another seekable adapter.
<section
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">
<p class="mb-6 text-xl font-medium uppercase tracking-[0.18em] text-cyan-300">
Render-ready Tailwind
</p>
<h1 class="text-7xl font-black leading-none text-balance">
Utility classes, deterministic frames.
</h1>
</div>
</section>
For repeated items, prefer class lists plus CSS custom properties over generating class names dynamically:
<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 0"></span>
<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 1"></span>
<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 2"></span>
Tailwind's browser runtime scans the current document and generates CSS for class names it can see. Do not build render-critical class names only at seek time:
// Risky: Tailwind may not see every generated class before capture.
element.className = `bg-${color}-500`;
Use complete class names in HTML, data attributes, or explicit CSS instead:
<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.
w-[...], h-[...], aspect-video, grid, flex, and fixed padding for video layouts.border border-white/20 is safer than bare border.shadow-xs, rounded-xs, outline-hidden, shrink-*, and grow-* where those replacements apply.After editing a Tailwind-enabled composition:
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
For a render proof:
npx hyperframes render . --workers 1 --quality draft --output tailwind-proof.mp4
The validation path should show no missing-style flashes on frame 0. If styles appear in preview but not render, check that window.__tailwindReady exists and resolves before capture.
hyperframes init --tailwind.@tailwindcss/browser@4.2.4.window.__tailwindReady is present.@tailwind directives with v4 browser-runtime CSS.tailwind.config.js to @theme.npx hyperframes validate and render a short proof.