Tailwind to CSS Converter
Convert Tailwind CSS utility classes to plain CSS
Paste Tailwind CSS class names to convert them to plain CSS. Handles spacing, colors, typography, flexbox, borders, shadows, sizing, and more. Responsive and state prefixes (e.g., md:, hover:) are noted as comments.
Why This Tool
When you need to understand exactly what CSS a Tailwind class produces, or when you need to convert a Tailwind-styled component to vanilla CSS, this tool maps Tailwind utility classes to their generated CSS properties. Useful for learning Tailwind, debugging styles, or migrating away from Tailwind.
How It Works
Paste Tailwind classes (like flex items-center gap-4 p-6 rounded-lg shadow-md) into the input. The tool maps each class to its CSS equivalent and generates a complete CSS rule. Copy the output for use in plain CSS stylesheets.