tailwind

Apply Tailwind v4 browser-runtime styling to HyperFrames compositions.

118|12|Updated May 5, 2026
One-click install
npx skills add https://github.com/alecs5am/ralphy --skill tailwind-alecs5am
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/alecs5am/ralphy/tree/main/.agents/skills/tailwind
Command: npx skills add https://github.com/alecs5am/ralphy --skill tailwind-alecs5am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS patterns for HyperFrames compositions, enabling CSS-first styling in browser-runtime renders without relying on traditional Tailwind setup.

Core Features & Use Cases

  • Tailwind v4 browser-runtime patterns for HyperFrames compositions, enabling deterministic renders.
  • Guidance for scaffolding and editing projects created with hyperframes init --tailwind, including CSS-first theme tokens and utility classes.
  • Migration and debugging guidance to ensure compatibility with the pinned runtime and readiness checks.

Quick Start

Apply Tailwind v4 browser-runtime styling to your HyperFrames composition by wiring in the browser runtime script and using @theme and @utility blocks in your index.html.

Frequently Asked Questions about tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Tailwind v4 browser-runtime styling in HyperFrames compositions?▼

To apply Tailwind v4 browser-runtime styling in HyperFrames compositions, wire the pinned browser runtime script into your project and use CSS-first @theme and @utility blocks in your index.html for deterministic visual rendering.

How do I migrate from Tailwind v3 to v4 for browser-runtime web design?▼

Migrating from Tailwind v3 to v4 for browser-runtime web design involves replacing legacy v3 directives with CSS-first @theme and @utility blocks while ensuring compatibility with the pinned runtime script and window.__tailwindReady readiness checks.

What is the Tailwind v4 CSS-first configuration pattern for HyperFrames?▼

The Tailwind v4 CSS-first configuration pattern for HyperFrames uses @theme blocks for theme tokens and @utility blocks for custom classes, avoiding traditional setup and legacy v3 directives for in-browser styling.

Why is my Tailwind styling not rendering in the HyperFrames browser runtime?▼

Tailwind styling fails to render in the HyperFrames browser runtime if the pinned runtime script version is missing or the window.__tailwindReady readiness check is not satisfied before applying CSS-first styles.

Can I use Tailwind v4 utility classes without a traditional build step for frontend web design?▼

Yes, you can use Tailwind v4 utility classes without a traditional build step by using the HyperFrames browser runtime to apply CSS-first styling directly during in-browser renders for frontend web design.

Does HyperFrames support scaffolding projects with Tailwind v4 CSS tokens?▼

Yes, HyperFrames supports scaffolding projects with Tailwind v4 CSS tokens through the hyperframes init --tailwind command, providing guidance for editing CSS-first theme tokens and utility classes.