This tool attempts to map simple CSS rules to Tailwind utility classes to speed up migration.
How do I quickly convert an old CSS file into Tailwind classes?
Paste the full CSS rule (e.g. `.btn{padding:10px;border-radius:4px}`) into the input field — the tool returns the closest Tailwind utility classes (`p-2.5 rounded`) with a brief explanation of the mapping.
What if the converter can't find an exact match for a property?
For non-standard values (custom colors or sizes), Tailwind supports arbitrary values in square brackets — `w-[137px]`; if the tool doesn't suggest a class, use that notation manually.
Can I convert CSS with media queries?
Yes, rules inside `@media` are converted to breakpoint-prefixed classes (`md:`, `lg:`) where possible, but complex media conditions should be double-checked manually after conversion.
Ways to migrate CSS to Tailwind
| Method | Speed | Accuracy |
|---|---|---|
| AI converter (this tool) | Seconds per rule | Good for simple rules, verify complex ones |
| Manual translation via Tailwind docs | Minutes per rule | High, but time-consuming on large files |
| Gradual component-by-component refactor | Weeks for a project | High, minimal regression risk |
| Leave as-is + Tailwind on top | No migration | No conflicts, but CSS keeps growing |