Use logical spacing utilities

Tailwind has spacing utilities that follow the writing direction instead of a fixed side. They’re called logical utilities.

ms-4 adds margin at the inline start. In English, which reads left to right, that’s the left side. In Arabic or Hebrew, which read right to left, it’s the right side. me-4 targets the inline end. Padding has the same pair: ps-4 and pe-4.

Here’s where it matters. A “Next” link with an arrow icon after the text:

<a class="inline-flex items-center" href="/next">
  <span>Next</span>
  <svg class="ms-2 size-4" aria-hidden="true">...</svg>
</a>

With ms-2, the gap sits between the text and the icon in both directions. With the physical ml-2, the gap is always on the left. In a right-to-left page the icon moves to the left of the text, and now the margin is on the wrong side, pushing the icon away from the text instead of separating them.

Check the generated CSS and you’ll see the difference. ml-2 becomes margin-left. ms-2 becomes margin-inline-start. The browser resolves the second one based on the element’s direction.

Not everything should be logical

px-4 applies equal padding to the left and right. Both sides match, so direction doesn’t matter, and there’s nothing to gain from a logical version. Use px-* when the two sides play the same role. Use start and end when they play different roles, like “before the text” and “after the text”.

What logical spacing does not do

It doesn’t flip your DOM, and it doesn’t mirror icons. The reading order in your markup still needs to make sense, and a directional arrow may need its own RTL treatment, because an arrow pointing right still points right in Arabic. Test the real component with dir="rtl" on an ancestor. Don’t assume the spacing class finished the localization work.

Positioning has logical utilities too: start-0 and end-0 instead of left-0 and right-0. Same question applies. Is this edge physical, or should it follow the writing direction?

Try this: build a labeled icon button, then toggle an ancestor between dir="ltr" and dir="rtl". Compare ml-2 with ms-2 in both directions. Write down what changed on its own and what still needs a design decision.