space-x-* and space-y-* is not working with flex-row-reverse and flex-col-reverse

[edgarasben]

What version of Tailwind CSS are you using?
v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?
play.tailwindcss.com

What version of Node.js are you using?
play.tailwindcss.com

What browser are you using?
Brave (Chromium)

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/iSSWGR1Ga3

Describe your issue
I just noticed that space-x-* and space-y-* doesn't work correctly with flex-row-reverse and flex-col-reverse. Instead of space in between children, the spacing is displayed on a side.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

That's expected behaviour, you have to use space-x-reverse in that case as well: https://tailwindcss.com/docs/space#reversing-children-order

[edgarasben]

Oh I see now, thank you for pointing it out @RobinMalfait!

I guess it would be more intuitive without needing to write space-x-reverse (because the spaces between elements don't really reverse). But I guess there are technical limitations preventing this.

[RobinMalfait]

In you case since you are using flex already, I would recommend you to use gap-x-32 or just gap-32 which looks like the better solution to me.

The space utilities work by setting a margin on all but the first item to create that gap.

[edgarasben]

Good tip! But flex gap is not yet well supported (92% globally) and also it's not always I use flex when I need space between elements.

I think the space utility should ideally identify that there is the reverse order class and place margins on the correct side.