CSS → Tailwind Class Guesser
Heuristically map common CSS declarations to Tailwind utility classes — entirely in your browser.
Local workspace
Named projects in IndexedDB · Local only — never synced to our servers. Worksp…
Batch workspace
Format multiple files locally in one run.
How to use the CSS to Tailwind
Paste code or file
Paste your raw CSS text or upload directly.
Configure options
Choose indentation, dialect, or formatting preferences.
Format & export
Click format, then copy, download, or inspect in tree view.
What is a CSS to Tailwind?
Heuristically map common CSS declarations to Tailwind utility classes — entirely in your browser. This tool re-indents and organizes code according to standard style conventions while checking for syntax validity. Everything executes 100% inside your browser, guaranteeing zero latency and complete privacy for API keys, user tokens, and confidential database schemas.
Options Explained
| Option | Description |
|---|---|
| Output style | Choose plain utilities, a JSX snippet, or a structured JSON report with notes. |
Frequently Asked Questions
Is this a perfect CSS-to-Tailwind compiler?
No. It is a fast local heuristic for common properties. Complex selectors, animations, and uncommon values may need manual tweaks.
Does it upload my stylesheets?
No. Conversion runs 100% in your browser.
What about arbitrary values?
Unrecognized lengths and colors become Tailwind arbitrary values like w-[13px] or text-[#111827].
Can I get JSX output?
Yes. Switch Output style to JSX className for a starter element snippet.
Does it support nested SCSS?
Only simple rule blocks are parsed. Flatten nested SCSS before converting.