Tailwind class diff

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.

6added
6removed
6unchanged
diff.txtdiff
+ added (6)
  gap-3
  rounded-full
  px-6
  py-3
  font-semibold
  focus-visible:ring-2

- removed (6)
  gap-2
  rounded-md
  px-4
  py-2
  font-medium
  shadow-sm

= unchanged (6)
  flex
  items-center
  bg-primary
  text-sm
  text-primary-foreground
  hover:bg-primary/90
Applied through cn(), 5 of the old classes would be overridden by a newer one for the same property: gap-2, rounded-md, px-4, py-2, font-medium. They are not in the diff above because they were never removed, tailwind-merge just drops them.
cn(before, after)text
shadow-sm flex items-center gap-3 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground hover:bg-primary/90 focus-visible:ring-2
Order inside the string does not matter to Tailwind, so two strings with the same classes in a different order show as unchanged here. What does matter is a variant: hover:bg-x and bg-x are different classes, and the diff treats them that way.
Made something you like?Blocks built on this pattern

Questions

Why does order not show up as a change?+

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.

What is the overridden list?+

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.

Are hover:bg-x and bg-x the same class?+

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.

Related tools

The tools are free. So is most of the library.

2095 blocks and 1076 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version