skills.rest
boraoztunc
boraoztuncCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind

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

248|32|Updated Mar 30, 2026
Search Tags:#theming#tailwind#ui-design#css-first#v4#hyperframes#browser-runtime
One-click install
npx skills add https://github.com/boraoztunc/skills --skill tailwind-boraoztunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/boraoztunc/skills/tree/main/tailwind
Command: npx skills add https://github.com/boraoztunc/skills --skill tailwind-boraoztunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 browser-runtime patterns give HyperFrames users a reliable, runtime-based approach to styling compositions without needing a full CSS build. It clarifies when to scaffold Tailwind-enabled projects, how to write utilities in composition HTML, how to introduce CSS-first theme tokens, and how to migrate between v3 and v4 syntax.

Core Features & Use Cases

  • Guidance for applying Tailwind v4 browser-runtime patterns inside HyperFrames compositions.
  • Instructions for writing Tailwind utilities directly in composition HTML and for adding CSS-first tokens.
  • Migration and debugging tips for v3 vs v4 syntax, plus guidance on when to compile Tailwind to CSS for offline or production renders.
  • Use cases include rapid prototyping of UI components, token-driven theming, and deterministic renders for video/composition outputs.

Quick Start

Initialize a HyperFrames project with hyperframes init --tailwind and load the v4 browser runtime, then write 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 v4 utilities inside HyperFrames compositions?▼

Use hyperframes init --tailwind to scaffold projects, loading the browser-runtime script so you can write Tailwind utilities directly in composition HTML without a full CSS build.

What is the Tailwind v4 browser-runtime pattern and how does it work?▼

The Tailwind v4 browser-runtime pattern uses a pinned @tailwindcss/[email protected] runtime injected via CLI, applying utility classes at runtime with a window.__tailwindReady readiness gate for deterministic validation.

How do I add CSS-first theme tokens in Tailwind v4?▼

Add CSS-first theme tokens directly within HyperFrames compositions using the v4 browser-runtime, enabling token-driven theming for rapid UI prototyping without requiring a separate build configuration.

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

Migrate Tailwind v3 to v4 syntax by debugging syntax differences within HyperFrames compositions, updating deprecated utilities to align with the v4 browser-runtime patterns and CSS-first token definitions.

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

Compile Tailwind to CSS for offline or production renders to ensure deterministic video and composition outputs, whereas the browser-runtime pattern is suited for rapid prototyping and development.

Related Skills

Explore More Design & Creative Skills→
KamalabotKamalabot

tailwind

Configure Tailwind v4 browser runtime and CSS-first themes for HyperFrames video compositions.

Community
Advanced
hoanghd218hoanghd218
7

tailwind

Style HyperFrames compositions with Tailwind v4 browser-runtime patterns.

Community
Advanced
abeldotamabeldotam
13

tailwind-design-system

Establish a CSS-first Tailwind CSS v4 design system with @theme tokens and CVA components.

Community
Advanced
namuannamuan
4

frontend-slides

Convert PPTX or text outlines into zero-dependency HTML slides.

Community
Advanced