[Feature]: Support RTL in shadcn components

[lord007tn]

trafficstars

Describe the feature

It seems that components use left and right values from tailwindcss i would recommend using start and end so it supports RTL and LTR directions in projects

so instead of pr-1 , ml-2 ... we use pe-1, ms-2 And so on

also in components that have Chevron icons we should add rtl:rotate-180 class so we make sure when we change direction arrow rotate

Tasks:

• [ ] use ( start-, end- / ps-, pe- / ms-, me- / ... ) instead of (left-, right- / pl-, pr- / ml-, mr- / ... )
• [ ] add rotation transformation to chevrons that point to direction
• [ ] related bug https://github.com/radix-vue/radix-vue/issues/719

Additional information

• [X] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[sadeghbarati]

@lord007tn Thanks for bringing it up

1. Are you gonna add a CLI feature

2. Or gonna change the source code classes from directional properties to logical properties?

[sadeghbarati]

The CSS Logical Properties support table seems fine

https://caniuse.com/css-logical-props

---

Vite browserlist config https://github.com/vitejs/vite/blob/37af8a7be417f1fb2cf9a0d5e9ad90b76ff211b4/packages/vite/src/node/constants.ts#L19

[hrynevychroman]

Think that logical properties is better, thanks for the PR)

[lord007tn]

@sadeghbarati i will make a pr soon to change direction properties to logical properties as it seems to support i18n with multi direction website

[Saeid-Za]

Another note, that space-x-* won't work on RTL direction. a good replacement is gap-x-* if the container already is flex/grid.

[omar-labana]

any updates on this?

[sadeghbarati]

Created a poll here please share it for others

https://github.com/radix-vue/shadcn-vue/discussions/470

[Saeid-Za]

Coming back to this issue after a few months, could we extend the tailwind prefix functionality, to transform the component on the fly, based on user preference, before deploying them to the user machine?