RTL CSS with Logical Properties

The Golden Rule

NEVER use physical properties. ALWAYS use logical properties.

Property Mapping

Physical (❌)	Logical (✅)	Tailwind
padding-left	padding-inline-start	ps-*
padding-right	padding-inline-end	pe-*
margin-left	margin-inline-start	ms-*
margin-right	margin-inline-end	me-*
left	inset-inline-start	start-*
right	inset-inline-end	end-*
text-align: left	text-align: start	text-start
text-align: right	text-align: end	text-end
border-left	border-inline-start	border-s-*
border-right	border-inline-end	border-e-*

Tailwind Examples

// ❌ WRONG - Breaks in RTL
<div className="pl-4 pr-2 ml-auto text-left border-l-2">

// ✅ CORRECT - Works everywhere
<div className="ps-4 pe-2 ms-auto text-start border-s-2">

Next.js Layout with RTL

// app/[locale]/layout.tsx
import { isRtlLang } from 'rtl-detect';

export default function LocaleLayout({
  children,
  params: { locale },
}) {
  const dir = isRtlLang(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

Icon Flipping

// Directional icons need flip
<ChevronRight className="rtl:rotate-180" />
<ArrowRight className="rtl:rotate-180" />
<ArrowLeft className="rtl:rotate-180" />

// Universal icons - don't flip
<Check /> <X /> <Search /> <Menu /> <Home />

Audit Command

Run scripts/audit_rtl.sh to find violations in your codebase.

rtl-css

RTL CSS with Logical Properties

The Golden Rule

Property Mapping

Tailwind Examples

Next.js Layout with RTL

Icon Flipping

Audit Command

Checklist