converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

672|104|Updated Apr 10, 2026

Search Tags:#refactoring #frontend #css #migration #utilities #tailwind

Ready to run

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind-spencerpauly

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: converting-css-to-tailwind
Source: https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/converting-css-to-tailwind
Command: npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind-spencerpauly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual effort of translating plain CSS into Tailwind utility classes, making style refactors faster, more consistent, and easier to maintain.

Core Features & Use Cases

Selector-by-Selector Conversion: Maps CSS rules to equivalent Tailwind utilities for layout, spacing, typography, borders, colors, and effects.
Responsive and State Handling: Converts media queries and pseudo-classes into responsive and interactive Tailwind variants.
Practical Migration Workflow: Helps modernize legacy stylesheets in components and pages while preserving the original visual design.

Quick Start

Convert the attached CSS file into Tailwind classes and update the matching markup so the page keeps the same appearance.

Frequently Asked Questions about converting-css-to-tailwind

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

FAQPage Schema

How do I convert plain CSS to Tailwind utility classes?▼

To convert plain CSS to Tailwind utility classes, map individual CSS rules for layout, spacing, and typography directly into equivalent utility classes applied within your markup. This removes manual translation effort during component refactoring.

Can I migrate media queries and pseudo-classes to Tailwind variants?▼

Yes, you can migrate media queries and pseudo-classes to Tailwind variants. The conversion process translates existing responsive breakpoints and interactive state selectors into Tailwind's built-in responsive and state variant prefixes.

Does this CSS to Tailwind migration work with JSX and Vue codebases?▼

Yes, this CSS to Tailwind migration works with JSX, TSX, Vue, and Svelte codebases. It applies the converted utility classes directly into the markup of these frameworks during component migration and design-system cleanup.

What is the best way to handle custom properties and arbitrary values when refactoring CSS to Tailwind?▼

The best way to handle custom properties and arbitrary values when refactoring CSS to Tailwind is to map them using arbitrary value syntax. This ensures visual parity when modernizing legacy stylesheets without losing specific design tokens.

How do CSS animations translate during a Tailwind CSS migration?▼

CSS animations translate during a Tailwind CSS migration by mapping keyframes and animation properties to equivalent Tailwind utility configurations. This preserves the original visual design and motion effects throughout the refactoring workflow.