Clean a Tailwind class list: exact duplicates removed and conflicting utilities (two paddings, two display modes, two text colors) resolved last-wins — with a report of everything removed.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
Class lists rot
Components accumulate classes: someone adds p-6 without removing p-4, a merge leaves both flex and block, the same mt-2 appears twice. The browser resolves these by CSS cascade order — invisibly and sometimes not the way the last author intended. This cleaner makes it explicit: exact duplicates removed, property conflicts resolved last-wins, and every removal listed in a report you review.
Worked example
Input: p-4 flex text-sm p-4 block p-6 hover:bg-blue-500 hover:bg-blue-600
Output: text-sm block p-6 hover:bg-blue-600
/* Removed:
duplicate: p-4
conflict: p-4 (overridden by p-6)
conflict: flex (overridden by block)
conflict: hover:bg-blue-500 (overridden by hover:bg-blue-600) */How conflicts are detected
- Utilities are grouped by the CSS property they set — display, padding per side, text color vs text size (a subtle one:
text-lgandtext-whitedo NOT conflict), font weight, and dozens more. - Variants partition the groups:
md:p-2never conflicts withp-6, andhover:classes only compete with otherhover:classes. - This tool also absorbs the “duplicate class remover” job — duplicates and conflicts are one cleanup with one report.
Limitations
- Last-wins matches Tailwind’s practical cascade, but if the EARLIER class was the intended one, keep it and delete the later — the report exists so that decision is yours.
- Unknown/custom classes are kept untouched; the cleaner only reasons about utilities its grammar understands.
How to use the Tailwind Class Cleaner
- Paste a messy class list or markup.
- Click "Clean classes".
- The output shows the cleaned list plus a comment block naming every removed duplicate and conflict.
- Paste the cleaned list back into your component.
Frequently asked questions
What counts as a conflict?
Two utilities that set the same CSS property with the same variants — p-4 and p-6, flex and block, text-white and text-blue-500. The cleaner keeps the LAST one, matching how the generated CSS cascades in practice, and reports what it dropped.
Why does hover:bg-blue-500 not conflict with bg-blue-500?
Different variants target different states, so both belong. Only utilities with identical variant stacks compete — that is exactly how the conflict detection groups them.
Does this also remove duplicate classes?
Yes — exact duplicates are removed first (this tool absorbs the "duplicate class remover" job), then property conflicts are resolved. Both removals are listed separately in the report.
Is last-wins always correct?
It matches Tailwind's practical behavior, but if the earlier class was the intended one, the fix is choosing it — that is why the removed list is printed instead of the cleanup being silent.
