Tailwind · RTL

Arabic RTL in Tailwind without a second stylesheet

For a bilingual English + Arabic app, you don’t need a separate RTL stylesheet. Set the direction once on the html tag from the current locale:

<html lang="{{ app()->getLocale() }}"
      dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">

Then use Tailwind’s logical utilities — ms-* / me-* and ps-* / pe-* (margin and padding start/end) — instead of ml/mr and pl/pr, so spacing flips automatically. Keep the rtl: variant for the few things logical properties can’t handle, like mirroring an arrow icon:

<svg class="h-4 w-4 rtl:rotate-180">…</svg>

Test with real Arabic copy early — it wraps differently from English placeholder text, and that is where most layout surprises come from.