Question: Can margin-inline replace margin-right/left for better RTL/LTR handling in space-x utility?

[Mrahmani71]

Hello, I was testing some code and noticed that the space-x-4 style wasn't being applied correctly in my example. In the image below, you can see the problem where the space between the two buttons isn't properly applied. This is because I used the direction: rtl; style for the div.

// rtl and ltr are custom classes

<div className="font-semibold space-x-4 ltr">
  <Button>چپ به راست</Button>
  <Button>Left to Right</Button>
</div>
<div className="font-semibold space-x-4 rtl">
  <Button>راست به چپ</Button>
  <Button>Right to Left</Button>
</div>

I changed this Tailwind CSS style:

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem* var(--tw-space-x-reverse));
    margin-left: calc(1rem* calc(1 - var(--tw-space-x-reverse)));
}

to this:

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-inline-end: calc(1rem* var(--tw-space-x-reverse));
    margin-inline-start: calc(1rem* calc(1 - var(--tw-space-x-reverse)));
}

In my opinion, this style now works correctly for both RTL and LTR. However, I'm not sure if it might cause other issues, and I wanted to ask for your opinion on this change.

[adamwathan]

Hey! Yeah this is what we're doing in v4 — breaking change so saving it for then. Can try the alphas now though if you want:

https://tailwindcss.com/blog/tailwindcss-v4-alpha

[Mrahmani71]

It is great. I will try it👍👍