Tailwind to CSS Converter
Convert Tailwind classes into plain CSS, for when you receive Tailwind markup but need a real stylesheet.
Turn Tailwind classes back into plain CSS, for when you receive Tailwind markup but need real stylesheets.
CSS
display: flex; align-items: center; justify-content: space-between; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; gap: 12px; border-radius: 12px; background-color: #6d5efc; color: #ffffff; font-size: 14px; font-weight: 600;
A variant such as hover: or md: is kept as a comment, because it decides when a rule applies rather than what the rule is. Wrap those declarations in the matching pseudo class or media query yourself.
.card {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
padding-bottom: 16px;
gap: 12px;
border-radius: 12px;
background-color: #6d5efc;
color: #ffffff;
font-size: 14px;
font-weight: 600;
}About the tailwind to css converter
Sometimes the markup arrives in Tailwind and the destination does not have Tailwind: an email template, a CMS field, a legacy stylesheet, or a component you are lifting into a different project.
Paste the classes, or the whole class attribute, and get the declarations back. Variants such as hover: and md: are kept as comments rather than silently flattened, because they decide when a rule applies, not what the rule is, and merging them into one block would change the behaviour.
How to use it
- 1Paste the classes or the whole class attribute.
- 2Name the selector for the output.
- 3Copy the CSS.
- 4Move any commented variants into the matching pseudo class or media query.
Questions
What happens to hover: and md: variants?
They are kept as a comment beside the declaration. You need to wrap those in the right pseudo class or media query yourself, because a variant changes the conditions of a rule rather than its contents.
Why was a class not recognised?
It is either a custom class from your own config or a utility outside the common set. Unrecognised classes are listed rather than dropped.
Are arbitrary values supported?
Yes. Something like bg-[#6d5efc] converts back to the matching declaration.
Will the output look identical?
Close, but Tailwind also applies a CSS reset that normalises margins, borders and font sizes. Without that reset the same declarations can render slightly differently.