Tailwindcss: space-x-* does not work in RTL direction

[chalist]

[chalist]

I fix this by doing this:

[dir="rtl"] {
    .space-x-4 > :not(template) ~ :not(template) {
        --space-x-reverse: 0 !important;
        margin-left: calc(1rem * var(--space-x-reverse)) !important;
        margin-right: calc(1rem * calc(1 - var(--space-x-reverse))) !important;
    }
}

But I would like to know, there is a way to make space without depends on direction?

[chalist]

https://github.com/tailwindcss/tailwindcss/pull/2020

[royvanv]

See https://github.com/tailwindcss/discuss/issues/64#issuecomment-532801714

[hsul4n]

Just use tailwindcss-dir and add space variant to tailwind.config.js

variants: {
  space: ['responsive', 'direction'],
},

[mohamed-ibrahem]

@hsul4n Not working! still, the margin in the last item and none in the first one 😟

[chalist]

@hsul4n Not working! still, the margin in the last item and none in the first one

I fixed this problem by this code:

[dir="rtl"] {
    .space-x-4 > :not(template) ~ :not(template) {
        --space-x-reverse: 0 !important;
        margin-left: calc(1rem * var(--space-x-reverse)) !important;
        margin-right: calc(1rem * calc(1 - var(--space-x-reverse))) !important;
    }
}

[mohamed-ibrahem]

@chalist good trick.
But I think the following way is much easier

variants: {
  space: ['responsive', 'direction'],
},

then you can do something like
space-x-6 rtl:space-x-reverse ✌✌

Saves much time, isn't it?

[chalist]

yes sure. But you wrote not working. This is because I write that comment :D

[mohamed-ibrahem]

yes sure. But you wrote not working. This is because I write that comment :D

Thank you 👍

[hsul4n]

Sorry @mohamed-ibrahem, I always add style utilities to variants property but looks like this doesn't work with space utility 😅, so I would suggest using reverse with RTL direction.

Here's example

<div class="flex space-x-4 rtl:space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>