[v4] space-* not considering last element being hidden

[aymanoid]

What version of Tailwind CSS are you using?

@tailwindcss/postcss@4.0.0-beta.2
tailwindcss@4.0.0-beta.2

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

https://tailwindcss.com/docs/v4-beta#installing-with-post-css

What version of Node.js are you using?

v22.11.0

What browser are you using?

Brave

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/0gur4OiFqm

Describe your issue

Using space-x-* or space-y-* on a list of elements adds a margin after the second to last element even when the last element is hidden.

[RobinMalfait]

Hey!

This is on purpose to improve performance around the selector. In v3 the selector looked like this:

..space-x-2 > :not([hidden]) ~ :not([hidden]) {}

In v4 it looks like this now:

:where(.space-x-2 > :not(:last-child)) {}

You can write a custom plugin that brings back the old behavior, but that also brings back the performance issues.

Another solution is to refactor your code such that the hidden elements are not rendered at all.

But the solution I would propose is to use gap-x-* and gap-y-* (or just gap-*) utilities instead. These only work inside flex or grid containers, but your example already uses flex so that should not be an issue. If your real code doesn't use flex you could refactor it to use flex instead.

Updated playground: https://play.tailwindcss.com/nkioujMJiN

Hope this helps!

[adamwathan]

@aymanoid Here's the PR with the change, includes a lot more details and examples of the bad performance problems the original implementation was causing:

#13459