DarnlyCSS to Tailwind converter
Paste CSS and get the Tailwind classes for each element. The preview draws your CSS and the Tailwind version side by side, so you can see they look the same before you copy.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
Paste some CSS and the classes appear here.
clean on Tailwind’s scaleclose nearest Tailwind valueexact value in square brackets
See each line
| Element | Your CSS | Tailwind | Note |
|---|
More free tools
See all 89 tools- JSON to TypeScriptPaste JSON and get TypeScript types and a Zod schema, with optional fields found for you.
- Diff checkerCompare two texts side by side and see every added, removed and changed word. Nothing is uploaded.
- px to rem converterpx to rem and back, live, with the matching Tailwind class and a ruler at real size.
How it works
- Paste your CSS on the left: whole rules like
.card { … }, or just an element’s inline style likepadding: 16px; color: #333. Or start with the example. - The preview at the top draws the same element twice, once with your CSS and once with the Tailwind classes, so you can see they match. Hover it to check hover styles too.
- Copy the classes for each element and paste them into
class(orclassName). Amber classes are exact values in square brackets: they work, but they aren’t part of Tailwind’s scale.
Questions
Does it handle every CSS property?
No, and we’d rather be honest about it. It handles the common things: spacing, sizes, colors, text, flex and grid, borders, rounded corners, shadows, hover and focus states, and @media breakpoints. Anything else is kept exactly as written in square brackets, like [mask-type:luminance], which Tailwind also accepts.
What do the amber classes mean?
They’re exact values in square brackets, like p-[18px] or bg-[#2563eb], used because nothing on Tailwind’s scale matched. They work fine. If you see a lot of them, your design may use its own spacing or colors, and adding them to your Tailwind theme keeps things tidy.
Why did my color become a Tailwind color like blue-600?
When your color is so close to a Tailwind color that people can’t tell them apart (difference under 2.5), we use the Tailwind name. Those classes have a dotted underline. Tick Snap colors to Tailwind to always use the nearest Tailwind color, even when it’s further away.
v4 or v3?
If your CSS file starts with @import "tailwindcss"; and there’s no tailwind.config.js, you’re on v4. If you have a tailwind.config.js, you’re on v3. Some names changed between them (v3’s shadow is v4’s shadow-sm, for example), and v4 changed the exact color shades.
How are @media queries turned into prefixes?
min-width: 640px, 768px, 1024px, 1280px and 1536px become sm:, md:, lg:, xl: and 2xl:. Other widths become min-[900px]:. max-width becomes max-sm: and friends, dark mode becomes dark:.
What about selectors like .card:hover .title?
That becomes group-hover: on .title, and the tool tells you to add the class group to .card. Other complex selectors are listed under the element they style.
Is my CSS uploaded?
No. Everything runs in your browser.