Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using CSS Logical Properties in space and divide layout utilities #1883

Merged
merged 2 commits into from
Oct 17, 2020

Conversation

20lives
Copy link
Contributor

@20lives 20lives commented Jun 4, 2020

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
Copy link
Contributor

👍

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
Copy link

ah, happy to see someone noticed

@adamwathan
Copy link
Member

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

@20lives
Copy link
Contributor Author

20lives commented Jun 27, 2020

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

@20lives 20lives closed this Jun 27, 2020
@20lives 20lives reopened this Jun 27, 2020
@adamwathan
Copy link
Member

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
Copy link
Contributor Author

20lives commented Jul 7, 2020

That should be it 🎉 sorry for the delay.

@20lives
Copy link
Contributor Author

20lives commented Aug 17, 2020

are you having second thoughts about this?

@MuhamadSelim
Copy link

great, thanks for contribution . waiting for merging

@20lives
Copy link
Contributor Author

20lives commented Oct 15, 2020

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
Copy link
Member

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

@20lives
Copy link
Contributor Author

20lives commented Oct 17, 2020

Sure! On it.

@adamwathan
Copy link
Member

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

Switching to logical properties to fix compatibilty issues with non LTR layouts.
Switching to logical properties to fix compatibilty issues with non LTR layouts.
@20lives
Copy link
Contributor Author

20lives commented Oct 17, 2020

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

@adamwathan adamwathan merged commit 2310031 into tailwindlabs:master Oct 17, 2020
@adamwathan
Copy link
Member

Thank you! 🙌

@HapLifeMan
Copy link
Contributor

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
Copy link
Member

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants