CSS to Tailwind — First-Pass Converter

Moving a hand-written CSS or Sass site to Tailwind usually means finding out the hard way what does not translate. This skill gives you that answer first. It converts what converts cleanly, checks each class against Tailwind's own scale, and tells you plainly what it left alone, so you can see whether Tailwind will cause problems on your site before you commit to it.

It is a first pass, not a promise of a perfect replacement. If the result looks right, keep it and fix only the spots the report lists. If it does not, your originals are untouched and every edited page has a backup.

What it does

• Compiles Sass (nesting, variables, mixins, partials) to plain CSS in a temporary file, so your .scss source is never touched
• Converts your stylesheet selector by selector, including hover and focus states and media queries as Tailwind variants
• Checks every class against the bundled Tailwind scale and color tables, and corrects the ones that do not match your CSS. For example a 320px width comes out as w-80, never w-24
• Leaves anything that needs judgment for you instead of guessing: selector combinators, keyframe animations, @supports blocks, pseudo-element content, approximate colors and off-scale values
• Keeps your old stylesheet linked while any rule is still unconverted, so nothing silently loses its styling, and tells you how to comment the link out to see what the Tailwind classes do on their own
• Saves a .bak copy of each HTML file before editing it, and never overwrites an existing backup
• Adds a short Tailwind rules section to CLAUDE.md, creating the file if needed
• If the project has no Tailwind at all, adds a version-pinned CDN script with an integrity hash so the classes render right away for preview
• Ends with a report: what was converted, what needs a manual fix, what the check corrected, and which values stayed arbitrary

How it works

1. Finds your HTML pages and the stylesheets they link, and asks which to migrate
2. Compiles Sass to flat CSS if needed and splits it into rules
3. Converts each rule to a candidate class list, using the optional converter tool when it is connected or Tailwind knowledge when it is not
4. Verifies every candidate against the scale and color tables and records each correction
5. Applies the classes to your HTML, backs up each file first, and unlinks the old stylesheet only when every rule was converted
6. Reports the result, including what to check by eye

What it is not

It does not guarantee a pixel-identical page. Tailwind resets some browser defaults, such as heading weight, paragraph margins and link underlines, so a page can differ slightly even where every rule converted. The report names the elements affected. It handles plain HTML files; Vue single-file components, CSS Modules and styled-components are out of scope.

Requirements

Node.js, used once to compile Sass with npx. A TailwindCSS MCP server is optional: if it is connected the skill uses it as a starting point, and if not the skill carries on without it. Either way every class is verified against the bundled tables. Network access is used only to fetch the Sass compiler and, for a project with no Tailwind, to pin the CDN script version.

Try it free first

Try it Free runs on Agensi's servers with a 5,000-character input limit, so it previews part of a page (for example one body and its stylesheet). The installed skill handles whole sites locally.

Works well with

Tailwind Review, the free companion skill, for ongoing checks once your markup is on Tailwind.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills