tailwind
Tailwind v4 browser-runtime patterns for HyperFrames video compositions with deterministic rendering.
What it does
- 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.
- Pinned runtime: @tailwindcss/browser@4.2.4.
- Browser runtime script is injected by the CLI. Do not replace it with cdn.tailwindcss.com.
Requirements & configuration
- You need utility classes, CSS-first theme tokens, custom utilities, or v3-to-v4 migration guidance.
- 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.
- If a generated class is unavoidable, make sure the full class token appears in a text/tailwindcss block before validation.
- Be careful with modern CSS utilities if the output needs older browser support. Tailwind v4 targets modern browsers.
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Tailwind v4 browser-runtime patterns for HyperFrames video compositions with deterministic rendering.
Source
Repository: https://github.com/heygen-com/hyperframes
tailwind FAQ
What does the tailwind skill do?
Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime. The user asks for Tailwind in a HyperFrames composition. A project was created with hyperframes init --tailwind.
What does tailwind require?
You need utility classes, CSS-first theme tokens, custom utilities, or v3-to-v4 migration guidance. 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. If a generated class is unavoidable, make sure the full class token appears in a text/tailwindcss block before validation. Be careful with modern CSS utilities if the output needs older browser support. Tailwind v4 targets modern browsers.
How do I install tailwind?
Run: npx -y skills add https://github.com/heygen-com/hyperframes --skill tailwind --agent claude-code — the source lives at github.com/heygen-com/hyperframes.
Maintain tailwind?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/heygen-com-hyperframes-tailwind?ref=badge) npx agentictools info skills/heygen-com-hyperframes-tailwind The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
theme-factory Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 1…
gws-gmail-send Send emails via Gmail with support for attachments, HTML formatting, and send-as aliases.
building-native-ui Complete guide for building native Expo apps with routing, styling, components, and platform conventions.
firecrawl-build-scrape Single-page content extraction from known URLs in markdown, HTML, links, or screenshots.
convex-create-component Design and build isolated, reusable Convex backend components with clear boundaries and app-facing wrappers.
vercel-react-view-transitions Native browser animations for React UI state changes using the View Transition API.