[v4] `space-*` doesn't work with `mr-*` on child element

[kevinschweikert]

What version of Tailwind CSS are you using?

4.0.0-beta.6

What build tool (or framework if it abstracts the build tool) are you using?

Standalone CLI in Phoenix Framework

What browser are you using?

For example: Arc

What operating system are you using?

For example: macOS

Reproduction URL

https://play.tailwindcss.com/y0WgeyArkt

Describe your issue

This was working in Tailwind 3 but broke in Tailwind 4. The issue is that mr-2 on the image element prevents the space-x-12 utility from the parent. In Version 3 they got both applied and in Version 4 the spacing-x is not applied.

<div class="flex items-center space-x-12">
  <img src="https://placehold.co/600x400" class="mr-2 h-8 rounded-sm" />
  <ul class="flex flex-row items-end">
    <li class="p-2">Nav 1</li>
    <li class="p-2">Nav 2</li>
  </ul>
</div>

I don't know if this is a known breaking change, but i couldn't find it in the new docs or in the changelog. Maybe i missed it somewhere.

[RobinMalfait]

Hey!

The issue here is that both the space-x-* and mr-* utilities apply a margin. 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)).

That said, in v3 we got lucky because of the specificity even though both utilities apply some form of margin to the element.

The best and easiest solution here would be to replace space-x-12 with gap-x-12 instead. If you are already in a flex or grid container, it's best to make use of the gap-* utilities instead of the space-* utilities.

Here is an updated Play with this change applied: https://play.tailwindcss.com/WSposiuhhc

Took some notes to document this change

Hope this helps!

[kevinschweikert]

Thanks for the confirmation! I just wasn't sure if this was a desired change or a bug in the beta. The gap fix is pretty straightforward and should've been there from the start 😉 Thanks for making Tailwind awesome!