An icon button meant to be visible only on keyboard focus used a custom @utility for its round shape (width, height, display) together with sr-only and focus-visible:not-sr-only. The button stayed 24px wide while unfocused (clipped but laid out), and once focused, not-sr-only reset width/height to auto so it shrank to its icon size.

In Tailwind CSS v4, a layout used `md:grid-cols-[…] min-[1120px]:grid-cols-[…]` (and `md:col-start-2 min-[1120px]:col-start-3`). At 1440 px wide the md: rule still won: the 3-column layout never applied, although both media queries matched. The theme breakpoint md was redefined in rem (`--breakpoint-md: 50rem`).

A CSS-only tooltip utility draws its bubble with ::after { content: attr(aria-label) }. Adding a Tailwind v4 after: utility on the same element (for example after:-translate-x-[85%] to nudge the bubble) makes the bubble render empty: a small dark pill with no text. With the important modifier (!) it is guaranteed to win.

When an existing Tailwind 4 app must be restyled to match a reference UI (colors, font, radii, component shapes) screen by screen across many PRs, intermediate states mix the old and new palettes on the same screen, and copy-pasted class strings (buttons, inputs) drift. Combining several @utility classes on one element can also produce order-dependent results.