Agent skill · software engineering · aiskillstore
tailwind
Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime.
Why this skill is useful
Provides specific patterns and rules for using Tailwind CSS v4.2 in HyperFrames compositions that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tailwind CSS for HyperFrames HyperFrames init --tailwind uses the Tailwind browser runtime pinned to @tailwindcss/browser@4.2.4. Treat that as Tailwind v4, not v3. This skill is for composition HTML generated by the CLI. It is not for packages/studio, which still uses Tailwind v3 internally with tailwind.config.js, PostCSS, and @tailwind directives. When To Use The user asks for Tailwind in a HyperFrames composition. A project was created with hyperframes init --tailwind. You see window.tailwindReady in index.html. You need utility classes, CSS-first theme tokens, custom utilities, or v3-to-v4 migration guidance. The render has missing styles and the project is relying on the browser runtime. Version Contract Pinned runtime: @tailwindcss/browser@4.2.4. Browser runtime script is injected by the CLI. Do not replace it with cdn.tailwindcss.com. HyperFrames waits for window.tailwindReady before frame capture starts. The readiness shim must stay deterministic: no render-loop polling APIs, no clock-based retries, no runtime network fetches beyond the pinned Tailwind runtime script. For offline, locked-down, or production-stable renders, compile Tailwind to CSS and include the stylesheet directly instead of relying on the browser runtime. v4 Rules Tailwind v4 is CSS-first: Avoid v3 setup patterns in browser-runtime compositions: Do not add a tailwind.config.js just to define colors, fonts, spacing, or utilities for a v4 browser-runtime composition. Use @theme and @utility in a text/tailwindcss style block. If you truly need an existing JavaScript config for a compiled v4 build, load it explicitly from CSS with @config, then validate in the browser. Do not assume v4 auto-detects v3 config files. HyperFrames Composition Pattern Keep Tailwind responsible for static layout and visual style. Keep motion timing in GSAP or another seekable adapter. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/tailwind