There is a need to change flex-row -> flex-row-reverse

[Ali-Javanmardi]

Hi,

To make right arrangement of flex items when there is a flex-row parent, it needs to convert flex-row-reverse
as a good sample you can check this component :

https://tailwindcomponents.com/component/tailwindcss-flow-chart

This manual modification to final css created by tailwind did the job for me:

[dir="ltr"] .flex-row {
flex-direction: row;
}

[dir="ltr"] .flex-row-reverse {
flex-direction: row-reverse;
}

[dir="rtl"] .flex-row {
flex-direction: row-reverse;
}

[dir="rtl"] .flex-row-reverse {
flex-direction: row;
}

of course I made these change to all other flex-row classes for sm, md, lg, xl and 2xl

Thanks,

[AmirHosseinKarimi]

Yea this will help, But should care about scenario do not want to reverse it automatically.
Need a controller class to apply or prevent it.

[Ali-Javanmardi]

I am agree with your comment,
That may suitable for this case but not in every situation.
Any how when I was playing with that component I had problem with arrangements and could solve it by mentioned above CSS modification.

I do not know when this modifications can make unwanted arrangement but can accept it is not useful for all cases.

[ranisalt]

@Ali-Javanmardi if I recall correctly, flex-row will lay elements left to right on LTR, and right to left in RTL, am I right? If you always want your children displayed in left to right, you need to add dir="ltr" to the container, and dir="auto" to the children components.

[Ali-Javanmardi]

@ranisalt You are right, I checked many other things and they are working right with current setting.
But still there is a question about above sample I mentioned in first post.
If you open that component in browser and then change page direction from LTR to RTL you will find unordered connection lines.
As I wanted to find if it is usable in RTL pages I did above changes and it worked.

But I am agree with you that it may make problem with other components.

So although it may be a rare situation to face problem like mentioned above component I think there is a value to solve it in a better way.

[20lives]

@ranisalt is correct, this component is direction agnostic, and designed specifically for LTR.
All you need to do is force LTR on this component regardless of the app's general direction.