tool · one of 34free, no counter
CSS to Tailwind
What is this CSS block as Tailwind utilities?
The failure mode of a CSS-to-Tailwind converter is the quiet near-miss: a value that became an arbitrary utility, a variant that was silently resolved, a colour that got mapped to a palette token this build has never read. Every line comes back beside what went in, with a note wherever the answer is not exact.
Reach itPress ⌘+K on any tab and type css to tailwind.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
pasted css as tailwind utilities, utilities back as css, line by lineMigrating a stylesheet, reading somebody else’s utility soup, or checking what a utility you half-remember actually emits. The reverse direction is the one people use most.
Asked about this tool
4 of themWhy does #ef4444 not become bg-red-500?
Because the theme is a file this build has not read. Mapping a hex to a palette token would be a guess that looks like knowledge; you get `bg-[#ef4444]` and a note instead.
What does it do with md:flex?
It states the variant rather than resolving it. `md:flex` does not mean `display: flex` - it means that at one breakpoint - and a converter that flattened it would produce CSS that is wrong at every other width.
When is a multi-declaration utility offered?
Only when every declaration it stands for is present. Two thirds of `truncate` is `overflow-hidden text-nowrap`, and offering the shorthand for it would change the output.
What happens to a property it has no mapping for?
It falls through to Tailwind’s arbitrary-property syntax and is marked as having done so, rather than being dropped.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits