Tailwind to CSS Converter
Expand Tailwind utilities into CSS declarations.
About this tool
Paste a string of Tailwind utility classes and expand common ones into a CSS rule block. Variants (hover:, md:) are called out in notes because they need a selector or media query wrapper.
How to use
Copy classes from a component, run the tool, then move declarations into a stylesheet or compare against your design tokens. Unrecognized utilities stay listed in notes instead of disappearing.
Example
Sample input uses common layout/spacing utilities you can edit before running.
Input
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldOutput
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Tip
Best for learning the CSS behind utilities or for teams that still maintain a CSS layer next to Tailwind.
Good to know
Which Tailwind classes does it understand?
A practical subset: display and position, flex alignment, the spacing scale for padding, margin, gap, and sizing, font size and weight, border radius, a few shadows, grid columns, opacity, z-index, a short list of common colors, and arbitrary values such as w-[320px] or bg-[#38bdf8]. Anything else is listed in the notes instead of being guessed.
What happens to hover:, md:, and other variants?
They are called out in the notes, not expanded. A variant needs a selector or a media query around the declaration, so wrap those by hand in your stylesheet.