rtl language support when using dir=rtl

[Ali-Hussein-dev]

What version of Tailwind CSS are you using?

v2.2.15

What browser are you using?
sidekick, edge, firefox

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

Describe your issue
When using space-x-* and dir="rtl", the first space between elements is not applied correctly, please see the reproduction.

[adamwathan]

Hey! This is by design, the space-x utilities are just a shorthand for margin-left on every element except the first one and aren't RTL-aware. In your case the best bet is to add space-x-reverse as well 👍🏻

https://play.tailwindcss.com/oCOjuQzs0s

If you don't need to support old browsers you can also just use gap with flexbox:

https://play.tailwindcss.com/O98oyObGlG

[Ali-Hussein-dev]

This is very helpful. Thanks for your quick response!

[soheilhasanjani]

https://www.npmjs.com/package/rtl-tailwindcss

[mostafaegouda]

@adamwathan
Why is space-x-* by design using margin-left? space-x-* rtl:space-x-reverse does the job but seems a bit unintuitive to me.
Would love to know if changing it to use logical properties breaks anything.

[jessemoe]

@mostafaegouda I have the same problem, we already used so many space-x-* in our project

[mostafaegouda]

@mostafaegouda I have the same problem, we already used so many space-x-* in our project

You can always create your own plugin to override the behavior. Or you can replace all instances of space-x-* with space-x-* rtl:space-x-reverse

[longzheng]

I figured out an easier workaround until Tailwind fixes this with logicalSiblingUtilities

tailwindcss/src/corePlugins.js

Line 1284 in a2196b0

if (flagEnabled(config(), 'logicalSiblingUtilities')) {

@layer utilities {
    [class*='space-x-'] {
        @apply rtl:space-x-reverse;
    }
}

We can automatically apply space-x-reverse in RTL for any selector classes that contains space-x-.

EDIT (2024-04-17): It has come to my attention that this hack, although very easy to apply, brings with it a significant performance penalty even if you don't use the space-x utility class because it has to evaluate this complex selector (due to the usage of class*) to every single DOM element on the page.

[mustafa0x]

for space-s-* support

import plugin from 'tailwindcss/plugin'

function spacing({matchUtilities, addUtilities, theme}) {
    matchUtilities(
        {
            'space-s': (value) => ({
                '> :not([hidden]) ~ :not([hidden])': {
                    '--tw-space-s-reverse': '0',
                    marginInlineEnd: `calc(${value} * var(--tw-space-s-reverse))`,
                    marginInlineStart: `calc(${value} * calc(1 - var(--tw-space-s-reverse)))`,
                },
            }),
        },
        {
            supportsNegativeValues: true,
            values: theme('space'),
        }
    )
    addUtilities({
        '.space-s-reverse > :not([hidden]) ~ :not([hidden])': {
            '--tw-space-s-reverse': '1',
        },
    })
}
const config = {
    plugins: [plugin(helpers => spacing(helpers))],
}

[meirroth]

@layer utilities {
    [class*='space-x-'] {
        @apply rtl:space-x-reverse;
    }
}

We can automatically apply space-x-reverse in RTL for any selector classes that contains space-x-.

@longzheng This is genius!! Thank you so much, you saved me updating 200 files.

[longzheng]

I figured out an easier workaround until Tailwind fixes this with logicalSiblingUtilities

tailwindcss/src/corePlugins.js

Line 1284 in a2196b0

if (flagEnabled(config(), 'logicalSiblingUtilities')) {

@layer utilities {
    [class*='space-x-'] {
        @apply rtl:space-x-reverse;
    }
}

We can automatically apply space-x-reverse in RTL for any selector classes that contains space-x-.

EDIT (2024-04-17): It has come to my attention that this hack, although very easy to apply, brings with it a significant performance penalty even if you don't use the space-x utility class because it has to evaluate this complex selector (due to the usage of class*) to every single DOM element on the page.

Since we uncovered a significant performance penalty with this workaround, we ended up doing another hack by overriding the space-x with the margin-inline-end and margin-inline-start properties which are RTL aware.

This method is actually part of an older Tailwind source code but behind some sort of feature flag https://github.com/tailwindlabs/tailwindcss/blob/v3.3.3/src/corePlugins.js#L1270-L1278

            matchUtilities(
                {
                    'space-x': (value) => {
                        value = value === '0' ? '0px' : value;

                        return {
                            '& > :not([hidden]) ~ :not([hidden])': {
                                '--tw-space-x-reverse': '0',
                                'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`,
                                'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
                            },
                        };
                    },
                },
                { values: theme('space'), supportsNegativeValues: true },
            );

[thekevdiaper]

@longzheng I'm not hugely familiar with making this kind of change in js libraries, could you tell me where you overrode it?

Can this be done in the tailwind.config.js file, or do I need to fork tailwindcss?

Thanks!