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.