space-y-* or space-x-* incorrect behaviour on reverse

[Nness]

What version of Tailwind CSS are you using?

For example: v4.1.7

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

Angular CLI v20 - should be vite v7.0.6

What version of Node.js are you using?

v22

What browser are you using?

Firefox

What operating system are you using?

Windows

Reproduction URL

https://tailwindcss.com/docs/upgrade-guide#space-between-selector

Describe your issue

In Tailwind CSS v4, it improved performance of space-x-* and space-y-* by utilize on :not(:last-child) instead of * + * CSS condition. Where it introduce new bug if it is used with space-x-reverse or space-y-reverse. In reverse order, it should be :not(:first-child). Else the last element will missing margin top, where first will have margin top that it should not have.

[Nness]

The fix should be:

.space-y-[value] {
  --tw-space-y-reverse: 0;

  & > :not(:first-child) {
    margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse));
  }

  & > :not(:last-child) {
    margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse)));
  };

}

[RobinMalfait]

The space-*-reverse utilities are meant to be used when the layout is reversed (e.g.: flex-col-reverse or flex-row-reverse).

You are likely missing any of these utilities, see: https://play.tailwindcss.com/zlJRdEYOJV

More info: https://tailwindcss.com/docs/margin#reversing-children-order

[Nness]

That sounds like your design decision, but same as what you guys have said, if it is in flex or grid, people should use gap. I treat space is to be used in block parent not flex or grid parent.

With change to use :not(:first-child), you are limit space-x-* or space-y-* to be only used in flex. Where from my opinion with gap, the most beneficial of space-*- is block parent.

[Nness]

You are supporting a scenario that shouldn't be used. Where ignore a case that gain great benefit from.

[RobinMalfait]

Can you share a concrete use case?

[Nness]

For example, in form, where people commonly want same space between each field. Instead of use margin bottom or margin top on each child, we can use space-y-*.

Of course, generally won't use reverse order.

For me it is just shocking where space is related to margin, but reverse order is strongly bind with flex. That's unexpected. Ever since there is gap, I have stopped use space for flex or grid.

[Nness]

I have just checked v2's document, it is for reversed order. I forgot it's original use case, so since I used for block parent only now a day, the reverse feels a bit surprise for me.

Feel free to close it.

[Nness]

Additional info on why I was looking at margin top, margin bottom is common scenario, where margin top is good when each item has different requirement on margin between previous item and current. So when hide any element, margin top works well.

In space scenario, since margin all the same, then margin top doesn't have much benefit.