tailwind

Guide Tailwind v4 browser-runtime usage in HyperFrames compositions.

40.2k|3.8k|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill tailwind-heygen-com
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/tailwind
Command: npx skills add https://github.com/heygen-com/hyperframes --skill tailwind-heygen-com

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 browser-runtime integration in HyperFrames can be confusing: developers need a clear contract for when to scaffold with init --tailwind, how to apply v4 utilities, and when to compile Tailwind to CSS rather than relying on the browser runtime.

Core Features & Use Cases

  • Browser-runtime Tailwind v4 guidance for HyperFrames compositions.
  • Migration guidance from v3 to v4, including how to replace postcss directives with CSS-first tokens.
  • Workflow patterns for scaffolding, editing, debugging, and validating Tailwind-backed layouts in renders.

Quick Start

Create or edit a HyperFrames composition with Tailwind browser-runtime enabled by running hyperframes init --tailwind and then apply v4 tokens in a text/tailwindcss block.

Frequently Asked Questions about tailwind

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

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

To use Tailwind v4 browser-runtime in HyperFrames, scaffold the project with the init --tailwind command, then apply v4 tokens directly within a text/tailwindcss block in your composition. This enforces CSS-first tokens for renders.

How do I migrate from Tailwind v3 to v4 syntax for HyperFrames?▼

Migrate from Tailwind v3 to v4 by replacing postcss directives with CSS-first tokens. This workflow requires debugging v3 vs v4 syntax differences and avoiding tailwind.config.js for browser-runtime renders.

Can I use tailwind.config.js with the Tailwind v4 browser-runtime?▼

No, you cannot use tailwind.config.js with the Tailwind v4 browser-runtime in HyperFrames. The runtime requires CSS-first tokens and explicitly avoids configuration files for rendering outputs.

Do I need a pinned Tailwind browser runtime version for HyperFrames?▼

Yes, HyperFrames requires a pinned Tailwind browser runtime version to execute compositions properly. This ensures consistent v4 utility application and accurate debugging of layout renders.

When should I compile Tailwind to CSS instead of using the browser runtime?▼

You should compile Tailwind to CSS instead of using the browser runtime when your HyperFrames composition requires custom configurations beyond CSS-first tokens, as the runtime explicitly avoids tailwind.config.js dependencies.

What is the Tailwind v4 browser-runtime contract for HyperFrames?▼

The Tailwind v4 browser-runtime contract for HyperFrames defines how to scaffold with init --tailwind, apply v4 utilities via text/tailwindcss blocks, and enforce CSS-first tokens while avoiding tailwind.config.js during renders.