RTL Support #1492

3adeling · 2020-03-26T01:44:21Z

3adeling
Mar 26, 2020

Hey there

600 millions of people in the world write and read from RTL.

It is disappointing that this must-have feature is not supported yet in Tailwind (it doesn't even respect the html dir="rtl" attribute).

do you have any plan to support RTL anytime soon?

adamwathan · 2020-03-26T01:51:58Z

adamwathan
Mar 26, 2020
Maintainer

See previous discussion here 👍🏻

tailwindlabs/discuss#64 (comment)

0 replies

3adeling · 2020-03-31T15:37:16Z

3adeling
Mar 31, 2020
Author

hey @adamwathan,

the plugin you mentioned doesn't work for me. I am using Laravel Tailwind Preset. I am not sure whats wrong.

We, the community, can provide support in fixing RTL bugs and issues but at least we need an official starting point in that direction from Tailwind team.

Regards,

0 replies

adamwathan · 2020-03-31T15:39:21Z

adamwathan
Mar 31, 2020
Maintainer

What doesn't work about it? Can you share an example project where you have tried to set it up so I can see what the issue is?

0 replies

3adeling · 2020-03-31T16:56:28Z

3adeling
Mar 31, 2020
Author

both rtl: & ltr: doesn't work.

I created new laravel project + Laravel Tailwind Preset + Tailwind Dir:
https://github.com/3adeling/tailwind-rtl-demo

I only used ltr:mr-5 & rtl:ml-5 and both of them isn't working when changing <html dir="ltr">

0 replies

adamwathan · 2020-03-31T16:59:51Z

adamwathan
Mar 31, 2020
Maintainer

Can you make the repo public so I can see?

0 replies

3adeling · 2020-03-31T17:03:04Z

3adeling
Mar 31, 2020
Author

It's public now. sorry for that :)

0 replies

adamwathan · 2020-03-31T17:19:29Z

adamwathan
Mar 31, 2020
Maintainer

Seems to be working fine:

I noticed the CSS file in your public folder was old and hadn't been recompiled, so make sure you run npm run dev (or have npm run watch running) to rebuild your CSS when you make changes to your Tailwind config.

0 replies

3adeling · 2020-03-31T17:26:08Z

3adeling
Mar 31, 2020
Author

Thank you very much @adamwathan. it is working now.

do I have to run npm run dev whenerver I add a new plugin?

0 replies

adamwathan · 2020-03-31T17:28:01Z

adamwathan
Mar 31, 2020
Maintainer

You have to rebuild your CSS files any time you make any sort of change that would result in different CSS yeah.

0 replies

20lives · 2020-04-22T10:40:02Z

20lives
Apr 22, 2020

In 99% of the cases the rtl: variant is trivial and can be predicted.

So it's really unreasonable to transform this:

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

to this:

<div class="text-green border ltr:pl-4 ltr:mr-1 ltr:right-0 ltr:rounded-l-md rtl:pr-4 ltr:ml-1 rtl:left-0 rtl:rounded-r-md">

moreover it's much harder to read and maintain.

I have written another plugin with a different approach: tailwindcss-rtl

just use start and end notations instead of left and right depends on your language direction.

Here is Workcation transformed with a simple search and replace.

1 reply

jquense Dec 13, 2021

+1 to variants being a bad general solution to this problem. Since tailwind v3 is now JIT only, adding support for CSS logical properties would replace the need for tailwindcss-rtl, which is great, but doesn't seem easy to maintain!

Reex11 · 2021-12-21T15:50:47Z

Reex11
Dec 21, 2021

+1 to variants being a bad general solution to this problem.

I am currently working on Tailwind v2 and I'm using a plugin which added classes as the following:

ms-x Margin to Start ( Adds margin to the right if RTL and to the left otherwise )
me-x Margin to End ( Adds margin to the left if RTL and to the right otherwise )

I very much like that because it will automaticly decide the direction without having to specify both RTL and LTR. Also, I'll be able to force left or right if I want by using the default ml-x and mr-x.

Original Code:

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

New Code:

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

This way we have RTL and the original code will work as expected but without RTL functionality.
Also, I can have only the padding to be left whatever is the layout direction:

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

2 replies

johanekhager Jan 26, 2022

+1. This solution make much more sense compare to adding ltr and rtl variants. Would love this solution. 🥳

thibaudcolas May 20, 2022

See #1483, which discusses this approach in more details.

korenLevi · 2022-06-11T18:23:43Z

korenLevi
Jun 11, 2022

We will always need to add "ltr:pl-4" to our class ?

0 replies

alikazemkhanloo · 2022-10-23T18:15:43Z

alikazemkhanloo
Oct 23, 2022

postcss-rtlcss plugin adds support for rtl/ltr. no need for extra rtl: prefix in class names. just change the dir attribute in html tag.

5 replies

aneesdev Nov 16, 2022

postcss-rtlcss plugin adds support for rtl/ltr. no need for extra rtl: prefix in class names. just change the dir attribute in html tag.

Any example how to integrate that?

alikazemkhanloo Nov 17, 2022

As simple as this:

npm i postcss-rtlcss

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},    
        "postcss-rtlcss": {
         // invert ltr and rtl prefixes so that left and right would be natural in rtl
            ltrPrefix: '[dir="rtl"]',
            rtlPrefix: '[dir="ltr"]',
        }
    }
};

In my case, I was developing in RTL mode so I had to invert left and right to make it feel natural.

Another solution would be to use inline CSS properties as provided by the plugin tailwindcss-rtl. although haven't used it yet, but I prefer this one. Generates smaller CSS.

aneesdev Nov 17, 2022

=

As simple as this:
npm i postcss-rtlcss
// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},    
        "postcss-rtlcss": {
         // invert ltr and rtl prefixes so that left and right would be natural in rtl
            ltrPrefix: '[dir="rtl"]',
            rtlPrefix: '[dir="ltr"]',
        }
    }
};
In my case, I was developing in RTL mode so I had to invert left and right to make it feel natural.

Another solution would be to use inline CSS properties as provided by the plugin tailwindcss-rtl. although haven't used it yet, but I prefer this one. Generates smaller CSS.

Thanks, man. really appreciate it

HasanMothaffar Mar 27, 2023

Thank you! Saved me a lot of time searching for plugins.

tatthang96 Jan 11, 2024

@alikazemkhanloo Hi, thank you for your suggestion. However, I believe there is an issue when using it with translate because postcss-rtlcss doesn't seem to detect it.

adamwathan · 2023-03-28T03:41:00Z

adamwathan
Mar 28, 2023
Maintainer

Native logical properties support is coming tomorrow 🎁

0 replies

Aswinjithkukku · 2023-10-12T08:20:03Z

Aswinjithkukku
Oct 12, 2023

what if we need to use screen size tags with it like md:pr-4 and how to add rtl to this

2 replies

HasanMothaffar Oct 12, 2023

You can use Tailwindcss's logical properties. Instead of using md:pr-4, use md:pe-4 which works automatically in both LTR and RTL layouts. You can read more about logical properties here: https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-rtl-support-with-logical-properties

zoltanszogyenyi Nov 11, 2023

It's what we used over at Flowbite for our open-source UI components RTL integration as well and it has been a very seamless integration - so for sure logical properties are the way to go for Tailwind CSS.

code-creeper · 2024-02-26T19:23:30Z

code-creeper
Feb 26, 2024

I having the same issue then I found this in the docs
https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support

0 replies

Uh oh!

RTL Support #1492

Uh oh!

Uh oh!

Replies: 16 comments · 10 replies

Uh oh!

adamwathan Mar 26, 2020 Maintainer

Uh oh!

3adeling Mar 31, 2020 Author

Uh oh!

adamwathan Mar 31, 2020 Maintainer

Uh oh!

3adeling Mar 31, 2020 Author

Uh oh!

adamwathan Mar 31, 2020 Maintainer

Uh oh!

3adeling Mar 31, 2020 Author

Uh oh!

adamwathan Mar 31, 2020 Maintainer

Uh oh!

3adeling Mar 31, 2020 Author

Uh oh!

adamwathan Mar 31, 2020 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwathan Mar 28, 2023 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 16 comments 10 replies

adamwathan
Mar 26, 2020
Maintainer

3adeling
Mar 31, 2020
Author

adamwathan
Mar 31, 2020
Maintainer

3adeling
Mar 31, 2020
Author

adamwathan
Mar 31, 2020
Maintainer

3adeling
Mar 31, 2020
Author

adamwathan
Mar 31, 2020
Maintainer

3adeling
Mar 31, 2020
Author

adamwathan
Mar 31, 2020
Maintainer

adamwathan
Mar 28, 2023
Maintainer