tool · one of 34free, 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 itPress ⌘+K on any tab and type classes.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin 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.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits