RTL feature

[YoussefZidan]

Like Bootstrap5 adding RTL feature and substitute left, right classes with start, end classes.

[simonswiss]

Hey!

This is something we have considered a few times, but honestly don't have enough expertise/experience building RTL websites to be able to integrate something like this with confidence.

There is a pretty good community plugin available here, you can play with the live demo to see what it does!

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

[adamwathan]

We actually have experimental RTL support in the Tailwind v3.0 alpha! We aren't using logical properties yet and instead using rtl and ltr modifiers, but hoping to explore logical property support in the future. Biggest challenge is just naming things honestly.

Here's an example of what you can do in Tailwind 3:

<div class="pl-4 rtl:pr-4">
  ...
</div>

Need to add this to the release notes, kinda forgot about it 🤦‍♂️

[dcastil]

What does speak against adding classes like inline-padding-start (for padding-left) etc. from the tailwind-rtl plugin? With JIT it shouldn't create any overhead, right?

[vltansky]

@adamwathan maybe even use CSS logical properties looks like it's already widely supported: https://caniuse.com/css-logical-props?

https://github.com/stevecochrane/tailwindcss-logical

[Reex11]

I've used this plugin, its great!
It uses classes like: start-x and end-x without ditching left-x and right-x

I very much like this approach because it will automatically decide the direction without having to specify both RTL and LTR. Also, Devs will be able to force left or right if I want by using the default left-x and right-x.
An Example:

Original Code:

<div class="text-green border pl-4 mr-1 right-0 rounded-l-md">

RTL support Code:

<div class="text-green border ps-4 me-1 end-0 rounded-s-md">

This way we can support RTL, and the original code would work as expected without any change (if you're don't care about RTL).
Also, I can force left padding in both RTL and LTR layouts if I want like this:

<div class="text-green border pl-4 me-1 end-0 rounded-s-md">

This is more elegant, easier to read and to implement.

[alaadahmed]

Hi everyone, currently I am working on big project and depend extensively on rtl and ltr utilities. I hope they are stable enough. So far they are working great except very few times I need to refresh the page to make these utilities take effect. Web app is English <-> Arabic

Screen.Recording.2022-01-23.at.21.39.43.mov