converting-css-modules-to-tailwind

What problem does it solve?

This Skill removes the manual effort of translating CSS Modules into Tailwind utility classes, helping you modernize components without rewriting styling logic by hand.

Core Features & Use Cases

• Class Mapping: Converts each styles reference into an equivalent Tailwind class set.
• Pattern Handling: Covers conditional class names, composed classes, dynamic variants, and global overrides.
• SCSS Migration: Helps flatten nested selectors, variables, and mixins when moving from module-based styling to utility-first markup.
• Use Case: Update a React card component from Card.module.css to Tailwind while preserving layout, spacing, typography, and interactive states.

Quick Start

Ask the assistant to convert the attached component and its matching CSS Module into Tailwind classes, then remove the styles import and verify that the visual output still matches.