Paste two Tailwind class strings and see exactly which classes were added, removed and kept, plus which of the old ones cn() would silently override if the new string were merged on top.
+ added (5) gap-3 rounded-full px-6 py-3 focus-visible:ring-2 - removed (5) gap-2 rounded-md px-4 py-2 shadow-sm = unchanged (7) flex items-center bg-primary text-sm font-medium text-primary-foreground hover:bg-primary/90
shadow-sm flex items-center gap-3 rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus-visible:ring-2
Tailwind compiles each class on its own, so the order inside the string has no effect on the styles. The diff compares sets, which is what a reviewer actually wants: a reordered string is noise, a new class is a change.
Classes from the first string that survive a plain diff but would be dropped by tailwind-merge when the second string is applied on top, because a later class sets the same property. It is the difference between what you wrote and what cn() ships.
No. A variant makes a different class, and the diff keeps them apart. That is also why tailwind-merge does not let hover:bg-blue-500 override bg-red-500: they apply in different states.
2236 blocks and 1325 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.
Browse the blocksNo signup for the tools. MIT for free blocks, commercial licence for Pro.