In Tailwind v4, plain CSS beats utility classes regardless of order

A rule such as .shell { padding: 0 2rem; } in my global stylesheet zeroed the py-* utilities on the same element. Elsewhere a { color: inherit; } made a button's label nearly invisible by defeating a text colour utility.

Tailwind v4 puts its output in cascade layers. Under the CSS Cascade Layers specification, any style outside a layer beats a style inside one, no matter the specificity or the source order.

Any hand-written rule in a plain stylesheet should go inside @layer base or @layer components, or touch only properties no utility will set on that element. When a utility class mysteriously does nothing, the first thing I check now is the bare selectors at the top of globals.css. This website's stylesheet follows that rule.