Free Tailwind to CSS Converter
Convert Tailwind CSS classes to their vanilla CSS equivalents. Paste your classes and get the standard CSS with proper properties and values. No signup required.
100% free — no account needed
classes converted: 7/7
Tailwind
CSS
display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-radius: 0.5rem; /* bg-white: theme-dependent color */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
Free Tailwind to CSS Converter Features
Understand what your Tailwind classes do
Dynamic Patterns
Handles dynamic values like p-4, m-2, w-1/2, text-xl with proper calculation.
100+ Classes
Supports spacing, sizing, text, flex, grid, display, border, and more.
Copy CSS
One-click copy of the generated vanilla CSS output.
Prefix Support
Recognizes responsive (md:, lg:) and state (hover:, focus:) prefixes.
FAQ
Does this cover all Tailwind classes?
It covers the most common utility classes (100+). Custom theme values and complex arbitrary values may not convert perfectly.
What about color classes?
Color classes (text-blue-500, bg-red-200) are shown as comments since the actual values depend on your Tailwind theme configuration.
Can I paste a full className string?
Yes. Paste space-separated classes like 'flex items-center p-4 text-sm font-bold' and each will be converted to its CSS equivalent.
More CSS Utilities
CSS gradient, box shadow, flexbox playground, and more.