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.

Sign up for GitHub

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

Jump to bottom

[Feature]: Support RTL in shadcn components #357

Open
1 of 5 tasks
lord007tn opened this issue Feb 21, 2024 · 8 comments · May be fixed by #379
Open
1 of 5 tasks

[Feature]: Support RTL in shadcn components #357

lord007tn opened this issue Feb 21, 2024 · 8 comments · May be fixed by #379
Labels
enhancement New feature or request

Comments

@lord007tn
Copy link

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:

Additional information

  • I intend to submit a PR for this feature.
  • I have already implemented and/or tested this feature.
@sadeghbarati
Copy link
Collaborator

sadeghbarati commented Feb 22, 2024 •
edited
Loading

@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 sadeghbarati added the enhancement New feature or request label Feb 22, 2024
@sadeghbarati
Copy link
Collaborator

sadeghbarati commented Feb 22, 2024 •
edited
Loading

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

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

@lord007tn
Copy link
Author

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

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

@Saeid-Za Saeid-Za mentioned this issue Feb 27, 2024
Closed
2 tasks
@zernonia zernonia linked a pull request Mar 5, 2024 that will close this issue
fix: change to css logical props #379
Open
@sadeghbarati sadeghbarati mentioned this issue Mar 23, 2024
Closed
2 tasks
@omar-labana
Copy link

any updates on this?

@sadeghbarati
Copy link
Collaborator

sadeghbarati commented Apr 5, 2024 •
edited
Loading

Created a poll here please share it for others

#470

@Saeid-Za
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: change to css logical props lord007tn/shadcn-vue
5 participants
@sadeghbarati @omar-labana @lord007tn @Saeid-Za @hrynevychroman