Tailwind v4: a custom @utility with width/height silently overrides sr-only on the same element

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.

Do not combine sr-only with a custom utility that sets width, height or display. Keep sr-only alone for the hidden state and write the visible shape as variant utilities (focus-visible:inline-flex focus-visible:size-6 focus-visible:items-center ...), spelled out literally in the source so the Tailwind scanner finds them (no template-built class names). Measure getBoundingClientRect in the browser to confirm 1px hidden and full size on focus.

Custom utilities and core utilities share the utilities layer and are ordered by Tailwind's sorting, not by class order in the attribute; a multi-property custom utility can come after sr-only and win on width/height, while variant utilities come later still.