tool · one of 34 free, 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 it Press ⌘ + K on any tab and type css to tailwind. Ctrl + K on Windows and Linux
in 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.
how to use css to tailwind
- Open CSS to Tailwind and paste the block. Either direction works.
- Read it line by line: the input, the output, and a note wherever the answer is not exact.
- Check the notes for arbitrary values and colours mapped to tokens this build has never read.
- Variants are stated rather than resolved, so copy the line out knowing what it still depends on.
written about at length
70 of these · no host permissions · three free audits