feat: RTL support #320
feat: RTL support #320
Conversation
We have notice a few problems with RTL languages, here are what we have changed: - change all margin, padding, border-radius to the new logical property utilities introduced in Tailwind v3.3 (https://tailwindcss.com/blog/tailwindcss-v3-3) to support both LTR and RTL languages - change all text direction text-left to rtl:text-right ltr:text-left
|
@HassanKadhim is attempting to deploy a commit to the Nuxt Labs Team on Vercel. A member of the Team first needs to authorize it. |
src/runtime/app.config.ts
Outdated
| @@ -11,7 +11,7 @@ const table = { | |||
| selected: 'bg-gray-50 dark:bg-gray-800/50' | |||
| }, | |||
| th: { | |||
| base: 'text-left', | |||
| base: 'ltr:text-left rtl:text-right', | |||
There was a problem hiding this comment.
What about when not using either ltr or rtl? The text is centered for me.
There was a problem hiding this comment.
When converting the direction to rtl, the writing is not in the middle, so I set the direction for the text
There was a problem hiding this comment.
I mean, we should also let text-left as by default ltr will only apply if a dir attr is present on HTML. See https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
There was a problem hiding this comment.
Yes, I understood what you meant and made the new commit
There was a problem hiding this comment.
Shouldn't it be the same for all the text-left?
There was a problem hiding this comment.
Yes , you can Check now
We have noticed a few problems with RTL languages, here are what we have changed: