Run any Skill in Manus with one click

css-to-tailwind

Stars829

Forks69

UpdatedMay 19, 2026 at 00:37

Migrate vanilla CSS, CSS modules, SCSS, or styled-component styles to Tailwind v4 utilities. Prefer @theme-backed tokens and semantic utilities; document arbitrary values and parity gaps. For audits, load review/workflow.md. Triggers: "CSS to Tailwind", "migrate to Tailwind", "tailwind migration", "styled-components to Tailwind", "SCSS to Tailwind", "review Tailwind classes", "tailwind parity".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

videojs

videojs/v10

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

4 files

SKILL.md

readonly

name	css-to-tailwind
description	Migrate vanilla CSS, CSS modules, SCSS, or styled-component styles to Tailwind v4 utilities. Prefer @theme-backed tokens and semantic utilities; document arbitrary values and parity gaps. For audits, load review/workflow.md. Triggers: "CSS to Tailwind", "migrate to Tailwind", "tailwind migration", "styled-components to Tailwind", "SCSS to Tailwind", "review Tailwind classes", "tailwind parity".

CSS to Tailwind

Guidance for converting legacy CSS to Tailwind v4 class strings while preserving behavior and readability.

Tailwind v4 in this workspace

Theme and shared animation tokens are declared in CSS (@theme, keyed custom properties consumed by utilities). Apps use @import "tailwindcss"; packages/skins layers shared @keyframes / @property / @theme in shared/tailwind.css. When a pattern repeats across components, prefer @utility or @custom-variant in CSS (see site / apps/sandbox styles) rather than proliferating arbitrary values in TS presets.

See references/migration.md for v4-focused rules.

When to use

Migrating stylesheet-based styles to Tailwind utilities
Ensuring packages/skins CSS and tailwind component modules stay visually and behaviorally aligned (parallel css/ and tailwind/ trees)
Auditing Tailwind output for unnecessary arbitrary values or missing theme mappings

Reference

File	Contents
references/migration.md	Rules, priorities, migration report shape

Review

For checking a migration against these rules, load review/workflow.md.

File	Contents
review/workflow.md	Review process
review/checklist.md	Quick single-pass checklist

Related skills

Need	Use
Headless UI + skin hooks	`component` skill

More from this repository

same repository

spf-implement-feature

videojs/v10

Implement a feature documented in the SPF feature registry. Consumes a feature doc at internal/design/spf/features/<name>.md and produces the engine-side code: new behaviors, updates to existing behaviors, media-layer / network-layer primitives, and tests. The implementation analog of /spf-document-feature (which produces the doc; this consumes it). Walks through resolving the doc's open questions before coding, maps phases to discrete chunks, applies the SPF conventions catalog, routes to downstream skills (/spf-create-behavior, /spf-update-behavior, /refactor-behavior) per chunk shape, and updates the feature doc's Status / Implementation surface / Verification sections as code lands. Triggers: "implement feature", "implement SPF feature", "build feature", "code feature", "scope feature implementation", "implement <feature-name>".

2026-06-04829

spf-create-behavior

videojs/v10

Create a new SPF behavior with conventions-aligned shape. Walks through purpose articulation (carries /refactor-behavior's purpose-first discipline), signal type choice, slot map design, composition placement, cleanup pattern selection, test placement, and engine wiring. Distinct from /refactor-behavior (which modifies an existing behavior preserving its purpose) and /spf-update-behavior (which modifies an existing behavior whose purpose is changing). Triggers: "create behavior", "new behavior", "create SPF behavior", "add behavior", "scaffold behavior", "new SPF behavior".

2026-05-27829

spf-document-use-case

videojs/v10

Produce or update an entry in the SPF use-case-composition registry at internal/design/spf/use-cases/. Triangulates context from multiple sources (Notion, GitHub, pasted writeups, existing use-case docs, constituent feature docs, codebase), grounds the use case in the four composition mechanisms (subtract / add / alternative-impl / alternative-default-config), applies use-case-specific cross-cutting concern checks, drafts the doc at the appropriate definition depth, and cascades narrow updates to constituent feature docs and sibling use cases. Triggers: "document use case", "register use case", "use case doc", "update use case doc", "deepen use-case stub", "new SPF use case", "use case composition", "draft use-case registry entry", "new use case composition".

2026-05-27829

spf-implement-use-case

videojs/v10

Implement a use-case composition documented in the SPF use-case-composition registry. Consumes a use-case doc at internal/design/spf/use-cases/<name>.md and produces the engine-side code: a variant engine factory, a parallel adapter, composition wiring, use-case-specific behaviors (if any), and tests. The implementation analog of /spf-document-use-case (which produces the doc; this consumes it). Walks through disambiguation + routing (verify the request is actually a use case, check constituent-feature implementation status), resolves the doc's open questions with the user, maps phases to chunks, routes to downstream skills (/spf-implement-feature for unimplemented constituents, /spf-create-behavior, /spf-update-behavior, /refactor-behavior), and updates both the use-case doc and constituent feature docs as code lands. Treats the use-case doc as a starting point for planning, not a hardened specification. Triggers: "implement use case", "implement SPF use case", "implement use-case composition", "build use ca

2026-05-27829

spf-update-behavior

videojs/v10

Update an existing SPF behavior whose purpose is changing or expanding. Distinct from /refactor-behavior, which preserves purpose — this skill handles cases where the behavior gains new responsibility (new state slot to react to, new lifecycle phase, new constraint, new code path). Carries /refactor-behavior's purpose-first discipline applied to the *purpose change*. Triggers: "update behavior", "extend behavior", "modify behavior", "change behavior purpose", "expand behavior responsibility".

2026-05-27829

spf-document-feature

videojs/v10

Produce or update an entry in the SPF feature registry at internal/design/spf/features/. Triangulates context from multiple sources (Notion, GitHub, pasted writeups, existing feature docs, codebase), grounds the feature in the cluster heuristics, applies cross-cutting concern checks, drafts the doc at the appropriate definition depth, and cascades narrow updates to related feature docs. Triggers: "document feature", "register feature", "feature doc", "update feature doc", "deepen feature stub", "draft feature registry entry", "new SPF feature".

2026-05-21829

name	css-to-tailwind
description	Migrate vanilla CSS, CSS modules, SCSS, or styled-component styles to Tailwind v4 utilities. Prefer @theme-backed tokens and semantic utilities; document arbitrary values and parity gaps. For audits, load review/workflow.md. Triggers: "CSS to Tailwind", "migrate to Tailwind", "tailwind migration", "styled-components to Tailwind", "SCSS to Tailwind", "review Tailwind classes", "tailwind parity".

CSS to Tailwind

Guidance for converting legacy CSS to Tailwind v4 class strings while preserving behavior and readability.

Tailwind v4 in this workspace

See references/migration.md for v4-focused rules.

When to use

Migrating stylesheet-based styles to Tailwind utilities
Ensuring packages/skins CSS and tailwind component modules stay visually and behaviorally aligned (parallel css/ and tailwind/ trees)
Auditing Tailwind output for unnecessary arbitrary values or missing theme mappings

Reference

File	Contents
references/migration.md	Rules, priorities, migration report shape

Review

For checking a migration against these rules, load review/workflow.md.

File	Contents
review/workflow.md	Review process
review/checklist.md	Quick single-pass checklist

Related skills

Need	Use
Headless UI + skin hooks	`component` skill