Convert CSS to Tailwind classes. Fast, accurate conversion that works entirely in your browser.
Tailwind classes will appear here...Supports 52 common CSS-to-Tailwind mappings. Unrecognized properties are shown as comments.
Enter your css content.
Content is converted to text.
Copy or download the converted output.
Use CSS to Tailwind when migrating existing projects from traditional CSS to the Tailwind CSS framework. It significantly speeds up the migration process by automatically mapping CSS properties to utility classes. Frontend developers use it when refactoring legacy stylesheets or adopting a utility-first CSS approach for new component development.
The converter maps standard CSS properties to their Tailwind CSS utility class equivalents with high accuracy. It handles common properties like colors, spacing, typography, flexbox, and grid layout. Custom CSS values that do not have direct Tailwind equivalents are converted to arbitrary value syntax (e.g., w-[123px]).
All conversion happens locally in your browser using client-side JavaScript. No CSS code is transmitted to any external server, ensuring your stylesheets and design systems remain completely private. This is safe for converting proprietary design system CSS to Tailwind.
This is primarily a one-way conversion from CSS to Tailwind utility classes. While you can inspect the generated Tailwind classes, converting back to CSS would require the Tailwind compiler. Use this tool when migrating existing CSS codebases to the Tailwind CSS framework.