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
Decision gist · record as of 2026-07-27
Tailwind for HyperFrames helps you style compositions with Tailwind v4 browser runtime patterns and best practices. 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.
Use it when
- tailwind's browser runtime is a v4 engine that runs inside the HyperFrames rendering environment.
- tailwind v4 introduces CSS-first configuration with the `@theme` directive for defining custom tokens and `@utility` for creating.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
alecs5am/ralphy/tailwind · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
.agents/skills/tailwind/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Use Tailwind v4 browser runtime to style HyperFrames compositions”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill corrects AI agents that generate outdated Tailwind v3 code by teaching v4 syntax and configuration patterns. It covers 12 critical rules including CSS @import statements, @theme directives, modern opacity syntax, container queries, and renamed utilities, plus anti-patterns to avoid.
Shadcn Setup configures shadcn/ui components with modern Tailwind v4 CSS-first setup, installing dependencies and generating the required globals.css, components.json, and utility files. It handles theme selection, component installation, and ensures proper v4 configuration without deprecated patterns.
Master Tailwind CSS v4's CSS-first approach to rapid UI development with utility classes, design tokens, and modern CSS features. Learn theme configuration, dark mode implementation, container queries, component patterns, and shadcn/ui integration. Covers v3 migration and troubleshooting for build errors.
Master Tailwind CSS v4's CSS-first configuration model, Rust-powered engine, and modern setup across Vite and PostCSS. This skill covers installation methods, @theme-based theming, custom utilities and variants, plugin loading, and the shift from JavaScript config to pure CSS. Includes v3-to-v4 migration guidance and reference for new v4 utilities.
skill-tailwind teaches Tailwind CSS v4 implementation across any stack using plain HTML and CSS/SCSS. It covers CSS-first configuration, design-token mapping via @theme, v3→v4 migration, and two equal organizational approaches: utility-first classes and BEM with @apply.
Set up Tailwind CSS v4 to support Hebrew right-to-left layouts using built-in dir variants, logical utilities (ms-/me-/ps-/pe-), and Hebrew-optimized font stacks. Covers installation for Vite and PostCSS toolchains, font loading with swap display, and RTL-specific component patterns.
More skills tailwind-v3-to-v4-migration (MIT)