tool · one of 34 free, no counter
Classes
What is actually in this Tailwind class list?
A class attribute that has been edited by four people over two years carries duplicates, a p-4 that a later p-6 already beat, and a pt-2 pr-2 pb-2 pl-2 nobody noticed was p-2. This reads the attribute the author wrote - order and duplicates intact, because those are the thing being reasoned about - and hands back the shorter list plus what it did to get there.
Reach it Press ⌘ + K on any tab and type classes. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
every class on an element and what each one actually doesWhen a component has picked up a class list nobody wants to read any more, or before a review, where a shorter attribute is the difference between a diff somebody checks and one they scroll past.
Asked about this tool
4 of themWhich class wins when two of them conflict?
The last one in the attribute, because that is what the browser does - a utility further right in the string is a later declaration in the generated stylesheet. Removing the earlier one changes nothing on screen, which is the whole point.
Will it merge four sides into one shorthand?
Where it can do it without creating a conflict that was not there. pt-2 pr-2 pb-2 pl-2 becomes p-2; the same four with a pt-[3px] among them are left alone, because the merge would silently lose the odd one.
What happens to a class it does not recognise?
It survives, in place. The group table is deliberately not exhaustive - an unrecognised utility resolves to nothing and passes through, which is the only safe behaviour for a project with its own plugins.
Does it write the result back onto the element?
No. The output is copied. Writing a class attribute back onto a live page would be an edit to somebody else’s document that no build ever sees, and the useful destination is the source file.
how to use classes
- Select the element whose class attribute has stopped being readable.
- Open Classes to see the attribute exactly as written, order and duplicates intact.
- Run the passes you want - dedupe, conflict, merge, sort. Unknown utilities pass through untouched.
- Copy the result back over the attribute; nothing on the page was changed for you.
written about at length
70 of these · no host permissions · three free audits