skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

tailwind

Style HyperFrames compositions with Tailwind v4 browser-runtime patterns.

7|9|Updated May 9, 2026
Search Tags:#css#web-development#tailwind#ui-design#tailwind-v4#hyperframes#browser-runtime
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill tailwind-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/tailwind
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill tailwind-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 browser-runtime patterns enable styling HyperFrames compositions without a traditional CSS build step.

Core Features & Use Cases

  • Browser-runtime Tailwind v4 integration for HyperFrames compositions.
  • Guidance on when to use Tailwind without a build step, token management with theme tokens, and debugging v3 to v4 syntax.
  • Use Case: Rapidly style a composition without leaving the browser runtime; migrate from v3; optimize performance.

Quick Start

Begin by scaffolding a HyperFrames project with hyperframes init --tailwind and apply Tailwind utilities directly in your composition HTML.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I use Tailwind CSS in the browser without a build step?▼

Browser-runtime Tailwind v4 requires the pinned `@tailwindcss/[email protected]` runtime and uses the `window.__tailwindReady` flag to coordinate rendering. It processes Tailwind utilities directly in composition HTML without requiring a traditional CSS build step.

How do I set up a HyperFrames project with Tailwind CSS?▼

Scaffold a HyperFrames project using the `hyperframes init --tailwind` command, then write Tailwind utilities directly in your composition HTML. This setup leverages the browser runtime to apply styles instantly without external config files.

Does Tailwind v4 browser-runtime support v3 configuration files and directives?▼

Tailwind v4 browser-runtime does not support v3 configuration files and directives. It uses a CSS-first approach with theme tokens instead, and the Skill guides against using legacy v3 syntax to prevent styling conflicts.

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

Use the browser runtime for rapidly styling compositions without a build step, but compile Tailwind to CSS when you need optimized production performance. The Skill helps decide the best approach based on your rendering and optimization needs.

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

Migrate Tailwind v3 to v4 by replacing legacy directives and config files with CSS-first theme tokens. The Skill provides debugging guidance for v3 vs v4 syntax differences to ensure correct browser-runtime styling.

Related Skills

Explore More Design & Creative Skills→
1veso1veso

tailwind

Manages Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions.

Community
Intermediate
jfrometajfrometa

tailwind-patterns

Implement CSS-first Tailwind v4 patterns with container queries and design tokens.

Community
Advanced
automatedigitalautomatedigital
1

tailwind

Enforce Tailwind v4 browser runtime compliance in HyperFrames video compositions.

Official
Intermediate
boraoztuncboraoztunc
248

tailwind

Style HyperFrames compositions with Tailwind v4 browser-runtime utilities and CSS-first tokens.

Community
Advanced