{"enrichment":{"faq":[{"a":"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\u2014the runtime's class scanner works most reliably with literal values.","q":"How do I use Tailwind in HyperFrames compositions?"},{"a":"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.","q":"What is the tailwind browser runtime and how does it work?"},{"a":"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`.","q":"What are the key differences between tailwind v3 and v4?"},{"a":"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.","q":"How do I define custom theme tokens and utilities with @theme and @utility?"},{"a":"tailwind style debugging in HyperFrames requires checking three areas: (1) Verify class names are static strings, not dynamic concatenations\u2014the 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.","q":"How do I debug missing or incorrect tailwind styles in renders?"},{"a":"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.","q":"How does tailwind ensure deterministic video rendering in HyperFrames?"}],"shadow_tags":["css-first-framework","browser-runtime-styling","utility-class-generation","theme-token-system","deterministic-rendering","video-composition-styling","version-migration-guide","dynamic-class-safety"],"summary_rewrite":"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."},"files":[{"bytes":6270,"path":".agents/skills/tailwind/SKILL.md","sha256":"a19824a7bedeeafe1639144cc986fdc9ddc9e26c3626bbfb34de67d61a53bc38","url":"https://skillfed.io/files/alecs5am/ralphy/tailwind/83408c86/SKILL.md"}],"id":"alecs5am/ralphy/tailwind","links":{"html":"https://skillfed.io/alecs5am/ralphy/tailwind","md":"https://skillfed.io/alecs5am/ralphy/tailwind.md","repo":"https://github.com/alecs5am/ralphy"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"TypeScript","last_updated":"2026-07-27","license":"Apache-2.0","name":"tailwind","publisher":"alecs5am","stars":112},"relations":{"similar":[{"id":"ofershap/tailwind-best-practices/tailwind-best-practices"},{"id":"shipshitdev/skills/shadcn-setup"},{"id":"oakoss/agent-skills/tailwind"},{"id":"shipshitdev/skills/tailwind-validator"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"skills-il/localization/hebrew-tailwind-preset"},{"id":"rekryt/skill-tailwind/skill-tailwind"},{"id":"a-tokyo/agent-skills/tailwind-v3-to-v4-migration"},{"id":"existential-birds/beagle/tailwind-v4"},{"id":"gluestack/agent-skills/migrate-to-v5"}]},"slug":{"owner":"alecs5am","repo":"ralphy","skill":"tailwind"},"version":"83408c86"}