Logical properties for RTL

Write ms-4 and start-2, not ml-4 and left-2, so RTL mirrors.

From shadcn (Vercel plugin): RTL Support and migrate rtl.

Flip the direction

Switch to RTL; click a row to move the bar.

Physical: ml, leftBad
mr-2.5ml-autoleft-0.5pl-9
Logical: ms, startGood
me-2.5ms-autostart-0.5ps-9rtl:rotate-180
<html dir="rtl">

<a className="relative flex items-center h-9 ps-3 pe-2 rounded-md">
  <span className="absolute start-0.5 inset-y-2 w-0.5 rounded-full bg-primary" />
  <Inbox className="size-4 me-2.5" />
  <span>Inbox</span>
  <Badge className="ms-auto">12</Badge>
</a>

<ChevronRight className="size-4 ms-auto rtl:rotate-180" />  {/* icons need an explicit flip */}
<a className="ps-9">Drafts</a>

Convert a class string

Type classes or load a shadcn snippet.

ClassBecomesWhy
 
npx shadcn@latest migrate rtl

ml-* → ms-*     mr-* → me-*     pl-* → ps-*     pr-* → pe-*
left-* → start-*   right-* → end-*
rounded-l → rounded-s   border-r → border-e   text-left → text-start

Why it matters, pros and cons

Why it matters

ml-4 means left forever; ms-4 means before the text.

Pros

  • One class list serves LTR and RTL.
  • Flipping a page is one attribute.
  • Identical output in LTR.

Cons

  • Transforms and directional icons still need an rtl: pair.
  • Numbers, code and time axes must not mirror.
  • Needs Tailwind 3.3+ for ms- and start-.