flex + divide-x is incorrect on RTL

[Newbie012]

What version of Tailwind CSS are you using?

3.2.4

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

"postcss": "8.4.20",
"next": "13.1.1",

What version of Node.js are you using?

v18.4.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/uGu893pb62

Describe your issue

While using divide-x with flex, it doesn't play nicely on RTL.

Expected:

Actual:

[adamwathan]

Hey! This is currently by design, you should use divide-x-reverse when the direction of the children is reversed (either because of RTL or using flex-row-reverse):

https://tailwindcss.com/docs/divide-width#reversing-children-order

We considered moving to logical properties for these at one point but reverted it because the name divide-x doesn't make sense for stuff in the inline axis, since that axis can be vertical in vertical writing modes and x implies horizontal:

#2644

This is something I'm definitely interested in exploring how to improve still, especially with #10166 now open, but going to close this as "not a bug" at least since it is currently the intended behavior.

[TheMikeyRoss]

@adamwathan How can I reverse a grid if I'm using grid instead of flex ?