Use logical spacing utilities

Tailwind includes logical spacing utilities.

ms-4 adds margin at the inline start. In left-to-right English that is the left side; in right-to-left Arabic it is the right side. me-4 targets the inline end. Padding equivalents include ps-4 and pe-4.

Compare a directional icon gap:

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

The icon stays after the text in either writing direction. A physical ml-2 always means left margin and can put the gap on the wrong side in RTL content.

Not every horizontal utility is logical. px-4 deliberately applies equal padding to the physical left and right sides, which is also equal on the inline axis in common horizontal writing modes. Use it when both sides should match. Choose start/end when the two sides have different semantic roles.

Logical spacing does not reverse the DOM or automatically mirror icons. Reading order should remain meaningful in the markup, and directional symbols may need their own RTL treatment. Test the actual component with dir="rtl" rather than assuming the spacing class completes localization.

Positioning has logical utilities too, such as start-0 and end-0. Apply the same question: is this edge physical, or should it follow the writing direction?

Your action is to create a labeled icon control, switch an ancestor between dir="ltr" and dir="rtl", and compare ml-2 with ms-2. Record which parts change and which still require an explicit design decision.