We ship every Next.js template in English and Arabic, with a real right-to-left layout. After doing that across every website and dashboard we sell, the whole approach fits in one sentence:

Set dir on <html> , write spacing and position with logical utilities ( ms-4 , not ml-4 ), and keep the rtl: variant for the few things logical properties cannot express.

This post is the practical version of that sentence, with code from real projects. Every class below was checked against Tailwind CSS 4.3.

1. Put dir on <html> , on the server

Logical properties read the element's direction, the rtl: variant looks for it, and screen readers use lang to pick a voice. Put both on <html> , not on a wrapper: dialogs, menus and toasts usually render in a portal under <body> and only inherit a direction set above them.

With next-intl and the App Router, let app/[locale]/layout.tsx render <html> :

// src/config/i18n.ts export const directionOf = ( locale : string ) : "rtl" | "ltr" => locale === "ar" ?…