tailwind
This skill covers Tailwind v4 browser-runtime styling for HyperFrames compositions scaffolded with `hyperframes init --tailwind`. It explains CSS-first theme tokens, utility classes, dynamic class safety, and when to compile to CSS instead of relying on the runtime. Use it to debug missing styles, migrate from v3 syntax, and ensure deterministic frame rendering.
Tailwind for HyperFrames helps you style compositions with Tailwind v4 browser runtime patterns and best practices.
AI-generated summary based on this skill's SKILL.md
Install
alecs5am/ralphy/tailwind · repository language: TypeScript
git clone https://github.com/alecs5am/ralphy
cp -r ralphy/.agents/skills/tailwind ~/.claude/skills/tailwindnpx skillfed install alecs5am/ralphy/tailwindFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use Tailwind in HyperFrames compositions?
tailwind supports HyperFrames compositions through the browser runtime, initialized via `hyperframes init --tailwind`. Once set up, you can apply Tailwind utility classes directly to your JSX elements. The runtime loads Tailwind v4 into the browser context, scans your composition code for class names, and applies matching styles. For best results, use static class strings rather than dynamic concatenation—the runtime's class scanner works most reliably with literal values.
What is the tailwind browser runtime and how does it work?
tailwind's browser runtime is a v4 engine that runs inside the HyperFrames rendering environment. It watches for the `window.__tailwindReady` signal to confirm initialization, then processes your composition's HTML and applies CSS rules in real time. This eliminates the need for a separate build step during development. The runtime scans static class attributes and generates matching styles on demand, making it ideal for rapid iteration in HyperFrames projects.
What are the key differences between tailwind v3 and v4?
tailwind v4 introduces CSS-first configuration with the `@theme` directive for defining custom tokens and `@utility` for creating custom utility classes. The syntax is more declarative and integrates directly into your CSS. v3 relied on JavaScript configuration objects. For HyperFrames, v4's browser runtime is more performant and requires less setup. When migrating from v3, update your config to use CSS directives and verify that all custom utilities are redefined with `@utility`.
How do I define custom theme tokens and utilities with @theme and @utility?
In tailwind v4, add `@theme` blocks to your CSS to define custom color, spacing, or font tokens. For example: `@theme { --color-brand: #ff6b6b; }`. Use `@utility` to create custom classes: `@utility btn { @apply px-4 py-2 rounded bg-brand; }`. These directives replace v3's JavaScript theme configuration. In HyperFrames, place these in your main CSS file before initializing the runtime, and the browser engine will recognize and apply them to your compositions.
How do I debug missing or incorrect tailwind styles in renders?
tailwind style debugging in HyperFrames requires checking three areas: (1) Verify class names are static strings, not dynamic concatenations—the runtime scanner may miss dynamic values. (2) Confirm `window.__tailwindReady` is true before rendering. (3) Check the browser console for Tailwind initialization errors. If styles still don't apply, compile your CSS to a static file instead of relying on the runtime, then reference it in your composition. This ensures deterministic rendering and eliminates runtime variability.
How does tailwind ensure deterministic video rendering in HyperFrames?
tailwind achieves deterministic rendering by using stable, static class names and pre-compiled CSS files rather than runtime generation. For video exports, avoid dynamic class concatenation and use the `@theme` and `@utility` directives to lock in your design tokens. If the browser runtime introduces timing issues, switch to a compiled CSS approach: build your Tailwind output to a static file and import it directly in your composition. This guarantees consistent frame rendering across multiple exports.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
- Pinned runtime:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
.agents/skills/tailwind/SKILL.md