skills.rest
wesleysimplicio
wesleysimplicioCOMMUNITY
Explore all skills by this author →
𝕏@wesleysimplicGitHub

tailwind

Apply Tailwind v4 browser-runtime patterns to HyperFrames compositions.

1|Updated May 7, 2026
Search Tags:#debugging#css#migration#tailwind#v4#hyperframes#browser-runtime
One-click install
npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill tailwind-wesleysimplicio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/wesleysimplicio/simplicio-mapper/tree/main/.skills/tailwind
Command: npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill tailwind-wesleysimplicio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps developers apply Tailwind v4 browser-runtime patterns within HyperFrames compositions, eliminating confusion between runtime-based styling and traditional CSS pipelines.

Core Features & Use Cases

  • Guidance for using the Tailwind v4 browser-runtime in HyperFrames compositions and avoiding a separate Tailwind build for those scenarios.
  • Migration and compatibility guidance from Tailwind v3 to v4, including when to rely on the browser runtime versus compiling CSS.
  • Clear rules for project scoping, including how to scaffold and edit compositions created with hyperframes init --tailwind.

Quick Start

Follow the guide to enable the browser-runtime Tailwind flow in your HyperFrames project and start applying v4 utilities in compositions.

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 without a separate build step?▼

To use Tailwind v4 browser-runtime in HyperFrames, apply the browser-runtime patterns directly to compositions and avoid a separate Tailwind build. This approach relies on a specific v4 runtime version pin and does not require a compilation pipeline.

How do I migrate from Tailwind v3 to v4 browser-runtime in HyperFrames?▼

Migrating from Tailwind v3 to v4 involves debugging syntax differences and adopting the CSS-first approach. You must avoid using tailwind.config.js and transition to using @theme and @utility blocks for dynamic patterns.

Do I need a tailwind.config.js file for Tailwind v4 browser-runtime patterns?▼

No, you do not need a tailwind.config.js file for Tailwind v4 browser-runtime patterns. The v4 approach prescribes a CSS-first configuration method using @theme and @utility blocks instead of a JavaScript configuration file.

What is the difference between browser-runtime CSS and compiled CSS for HyperFrames?▼

Browser-runtime CSS applies Tailwind v4 styles directly in the browser without a build step, whereas compiled CSS requires a traditional pipeline. The browser-runtime approach is useful for scaffolding or editing HyperFrames compositions without separate compilation.

How do I scaffold a HyperFrames project with Tailwind v4 browser-runtime?▼

You scaffold a HyperFrames project with Tailwind v4 by running hyperframes init --tailwind. After scaffolding, apply the v4 browser-runtime patterns and use @theme and @utility blocks to manage dynamic styling within your compositions.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

gsap-awwwards-website

Build a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.

Official
Advanced
alecs5amalecs5am
118

tailwind

Apply Tailwind v4 browser-runtime styling to HyperFrames compositions.

Community
Advanced
hoanghd218hoanghd218
7

tailwind

Style HyperFrames compositions with Tailwind v4 browser-runtime patterns.

Community
Advanced
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced