Right-to-left (RTL) support is more than just flipping the layout. It requires careful consideration of component architecture, text alignment, directional icons, and spacing.
Tailwind CSS v4 introduces built-in logical properties through utilities like ms-*, me-*, ps-*, pe-*, start-*, and end-*. These replace the traditional ml-*, mr-*, pl-*, pr-* utilities.
When building Vue 3 components, use the dir attribute on the root element and leverage CSS logical properties. The Composition API makes it easy to create a useRTL composable.
For icons and directional elements, create a wrapper component that automatically flips SVG paths or rotates elements when in RTL mode.
Testing is crucial — always verify your components in both Arabic and English to catch spacing issues, overflow problems, and alignment bugs.