DarnlyTailwind class cleaner: sort, dedupe and fix conflicts
Paste a messy class list or a whole component. See it sorted the way Prettier sorts it, with duplicates gone and the classes that cancel each other out in red. Copy the clean version in one click.
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
Loading Tailwind…
Classes that fight each other
Only one class of each pair works. We keep the one that works today, so nothing changes. Meant the other one? Click it.
Worth a look
See every class and the CSS it sets
| # | Class | Kind | CSS it sets |
|---|
Your theme (optional): for your own colors and fonts
Paste the @theme block from your main CSS file, like @theme { --color-brand: #0593c6; }. Then classes like bg-brand are sorted and checked too.
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 a messy class list, or a whole component. We find every
className="…",class="…"andcn(…)in it. - The preview at the top shows your classes before and after. Red ones fight each other, so only one of them works. Gray dashed ones aren’t Tailwind classes.
- Pick which side of each fight you want to keep, then click “Copy”. Long lists can be split into a
cn()call with one line per kind of class.
Questions
Is this the same order as the Prettier plugin?
Yes. The order comes from Tailwind v4 itself, using the same call the official prettier-plugin-tailwindcss makes. Classes Tailwind doesn’t know (your own classes) go first, in the order you wrote them, just like the plugin does.
What counts as a conflict?
Two classes that set the exact same CSS, for the same screen size and state. p-2 p-4 both set padding, so only one works. p-4 px-2 is fine: px-2 changes only the sides, on purpose. p-4 md:p-8 is fine too, because they apply at different sizes.
Which class wins a conflict?
Not the one you wrote last. In Tailwind, the order in your class list doesn’t matter: the browser uses whichever class comes later in Tailwind’s CSS file. So text-lg text-sm and text-sm text-lg both end up small. A class marked important, like p-4!, beats the others. We show the real winner, and you can pick the other one instead.
Does removing the losing class change how my page looks?
No. The losing class already does nothing, so by default we keep the winner and your page looks exactly the same. If the loser is the one you actually meant, click it to keep that one instead. The “How it looks” box lets you compare.
I use Tailwind v3. Does this still work?
Mostly. The order is very close in v3, and conflicts work the same way. A few classes were renamed in v4, like flex-grow to grow; we keep your names unless you turn on “Use the newer v4 names”. Classes v4 removed, like bg-opacity-50, show up as “not Tailwind” with what to use now.
My own colors, like bg-brand, show as “not Tailwind”.
Open “Your theme” under the tool and paste your @theme { … } block from your CSS file. Then your colors, fonts and sizes are sorted and checked like any other class.
How do I make my editor do this every time?
Install the Prettier plugin: npm install -D prettier prettier-plugin-tailwindcss, then add "plugins": ["prettier-plugin-tailwindcss"] to your .prettierrc. It sorts and removes duplicates when you save. It won’t tell you about conflicts, so paste here when something looks off.
Is my code uploaded?
No. Everything runs in your browser, including Tailwind itself.