[v4] space-y-* works differently with mb-* on a child

[thijsvandien]

Under v3, I used to set for example space-y-4 as a base rule, and then -mb-1 on some child to slightly diverge from that. Under v4.0.0, it now seems to completely override the former.

Please see https://play.tailwindcss.com/RQmoDTdQga where there's a clear difference between the result of v3.4.15 and v4.0.0-beta.9 – I am not under the impression that it is at all browser dependent.

The (older) insiders build, f875ab9, still produced the same result as v3. Is this fairly recent change a bug or new expected behaviour? It would make sense not to support this sort of interplay, so it might rather be a matter of documentation.

Is it safe to change -mb-1 into mb-3 here, or should I expect that to break again in the future?

[wongjn]

Slightly related comment (#15390 (comment)):

In v4 we changed how space-x-12 is implemented to be more performant. In v3 it was implemented like this .space-x-12 > :not([hidden]) ~ :not([hidden]) whereas in v4 it is implemented like this :where(.space-x-12 > :not(:last-child)).

Thus, the wrapping in :where() in v4 reduces the specificity of space-* so that the m-* takes precedence.

I expect the maintainers tolerated this breaking change between major versions but I would not expect the behavior to change again with the v4 major version now that it is stable.

[thijsvandien]

Good find! That explains what's happening. Since there's already awareness of this, I guess the issue can be closed.

[tordans]

JFYI there is a similar thing when using space-y-4 prose which I documented at tailwindlabs/tailwindcss-typography#374