skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

migrate-css-to-tailwind

Migrate CSS, SCSS, and styled-components to Tailwind v4 utilities and theme tokens.

931|91|Updated Aug 13, 2025
Search Tags:#Frontend#styled-components#tailwind CSS#utility classes#SCSS#Design tokens#css migration
One-click install
npx skills add https://github.com/videojs/v10 --skill migrate-css-to-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-css-to-tailwind
Source: https://github.com/videojs/v10/tree/main/.agents/skills/migrate-css-to-tailwind
Command: npx skills add https://github.com/videojs/v10 --skill migrate-css-to-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converting legacy CSS, CSS modules, SCSS, or styled-components to Tailwind v4 by hand is error-prone: cascade, specificity, responsive states, and container queries are easily lost, and arbitrary-value classes pile up instead of theme-backed tokens.

Core Features & Use Cases

  • Declaration-to-utility mapping: Converts CSS declarations to built-in Tailwind utilities while preserving cascade, specificity, responsive breakpoints, and interaction states.
  • Tailwind v4 conventions: Guides use of @theme tokens, @utility, @custom-variant, and the build-time --spacing(N) function instead of legacy tailwind.config.js spreads or arbitrary-value classes.
  • Skin parity handling: Keeps packages/skinstailwind/ definitions in sync, treating the skin container as a Tailwind theme boundary with --media-spacing scaling.
  • Use Case: Migrate the Video.js site header module to Tailwind v4 and receive equivalent utilities, preserved responsive and hover states, inline custom-property bridges for one-offs, and a report of values that should become theme tokens.

Quick Start

Migrate the site header CSS module to Tailwind v4 utilities while preserving its responsive and hover states.

Frequently Asked Questions about migrate-css-to-tailwind

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

FAQPage Schema
How do I migrate CSS modules to Tailwind v4?▼

Read the source CSS and affected markup together, then map declarations to built-in utilities like flex, items-center, and gap-4. Prefer @theme tokens and semantic utilities over arbitrary values, and verify rendered behavior across states and breakpoints.

How to convert media queries to Tailwind responsive variants?▼

Map @media (min-width: 768px) to the md: variant using project breakpoints from @theme or default v4 screens. For container queries, use named container variants like @md/media-root: instead of switching to plain md:.

Does Tailwind v4 still use tailwind.config.js for theme tokens?▼

Tailwind v4 uses CSS-first configuration, so new design tokens go in @theme blocks in CSS rather than tailwind.config.js theme spreads. This generates utilities like rounded-* and gap-* from the token namespaces automatically.

When should I use arbitrary values in Tailwind v4?▼

Avoid arbitrary values for common scale values; use mt-4 instead of mt-[16px]. For literal spacing multipliers, use the build-time --spacing(N) function, and keep calc() with var() when multipliers are runtime-derived.

How do I handle one-off values that need responsive variants in Tailwind?▼

Define an inline CSS custom property and consume it with Tailwind custom-property syntax such as md:min-h-(--md-min-h). Use plain inline styles for true one-offs without variants, and add a theme token when the value repeats.

Related Skills

Explore More Software Engineering Skills→
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
endorphin-aiendorphin-ai
4

designer-frontend-contract

Freeze design mockups, port them to frontend, and verify visual parity.

Official
Advanced
GCWingGCWing
1.9k

create-bitfun-skin

Author, validate, and package sparse .bitfun-appearance skin packages against the BitFun Appearance contract.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate