Using CSS Logical Properties in space and divide layout utilities

[20lives]

Version 1.3 introduced two new layout utilities: space and divide, unlike all other tailwind utilities these new utilities assume your website is LTR and will break RTL layouts.

Luckily we can solve this using the CSS logical properties, which has wide browser support (not including IE11) and will not affect LTR layouts and only will switch left to right and right to left on RTL layouts.

this was initially suggested by @adamwathan in #1617 (comment)_

[Yiddishe-Kop]

👍

Thanks for resolving this issue!

Waiting for this to be merged - as I can't yet use the divide & space utilities for RTL projects yet.

[MathGeniusJodie]

ah, happy to see someone noticed

[adamwathan]

I would consider merging this if you kept the IE11 backwards compatibility stuff. Without that this is a breaking change unfortunately.

[20lives]

So how exactly do you want it to behave? Left/Right on IE11 and logical on modern browsers?

[adamwathan]

So how exactly do you want it to behave? Left/Right on IE11 and logical on modern browsers?

Yeah I think that's the most sensible solution.

[20lives]

That should be it 🎉 sorry for the delay.

[20lives]

are you having second thoughts about this?

[MuhamadSelim]

great, thanks for contribution . waiting for merging

[20lives]

Anyone who has been waiting for this to be merged tailwindcss-rtl added alternative utilities for these issues:

divide-x ---> divide-s
divide-x-8 ---> divide-s-8
space-x ---> space-s
space-x-4 ---> space-s-4

[adamwathan]

Do you mind updating this PR to resolve conflicts? Will merge for 2.0 👍 If not I can handle it myself!

[20lives]

Sure! On it.

[adamwathan]

Awesome! Can totally drop the IE11 stuff now too since we are killing that for 2.0. Thanks ❤️

[20lives]

Done,
did a minor restructure to enforce style without impacting readability,

[adamwathan]

Thank you! 🙌

[HapLifeMan]

Hey @adamwathan, I think that such a major update like TailwindCSS 2.0 would support RTL directions and even more by seeing that you've merged this PR. The web lacks of RTL support and would bring a very significative advantage for Tailwind given the minimal work involved to remplace/add CSS Logical Properties everywhere.

I know there's many plugins to do that (and I am using some of them), but such a feature would need to be included in the TailwindCSS core features.

Two solutions:

• Adapt existing utilities (for example ml-2 would generate margin-inline-start: 2rem; instead of margin-left: 2rem;)
• Create new utilities (for example ms-2 would generate the same, like tailwindcss-rtl)

Preferred solution would be the first one because it won't add new utilities and bring existing websites with Tailwind with direct RTL support (that would upgrade to 2.0 of course). I know that these properties aren't supported everywhere but as you are dropping support for IE, I think that's the same way.

Thanks!

[adamwathan]

Official recommendation is still to use one of the available plugins for RTL support. I've never built an RTL website and am not qualified to design that feature of a framework. Additionally logical properties are not supported in many places they need to be (like top/right/bottom/left properties) to be the final solution for RTL stuff, you still need conditional CSS for many things where logical properties don't work yet. I discovered this when I tweeted about it months ago when trying to investigate if this was going to be something I could easily support by just magically flipping everything over to logical properties.

https://twitter.com/adamwathan/status/1301683309555183620?s=21

[khatabwedaa]

Hey @adamwathan, I build RTL support components for tailwindcss without any plugin, lots of tweaking but the final result good to me not in everything but work well. you can check it here