Designing for global audiences means thinking beyond left-to-right (LTR) text. Many languages, such as Arabic and Hebrew, use right-to-left (RTL) writing. Supporting RTL is crucial if you want your app or site to feel natural to those users.

The CSS direction property controls the direction of text, table layout, and even grid columns. By default, MDN recommends using the HTML dir attribute (<div dir="rtl">) instead of styling directly. However, sometimes you’ll want finer control in components—such as flipping an interactive star rating or adjusting table alignment.

The challenge: Tailwind CSS doesn’t yet include utilities for direction out of the box.

Fortunately it is very easy to extend Tailwind with custom utilities. You can add classes for direction, text-orientation, and writing-mode right in your global CSS:

.direction-rtl {
  direction: rtl;
}

.direction-ltr {
  direction: ltr;
}

/* Text orientation helpers */
.text-sideways { text-orientation: sideways; }
.text-upright { text-orientation: upright; }
.text-mixed { text-orientation: mixed; }
.text-sideways-right { text-orientation: sideways-right; }
.text-glyph { text-orientation: use-glyph-orientation; }

/* Writing modes */
.writing-vertical-lr { writing-mode: vertical-lr; }
.writing-vertical-rl { writing-mode: vertical-rl; }
.writing-horizontal-tb { writing-mode: horizontal-tb; }

Once these are in place, you can use them alongside your Tailwind classes, e.g.:

<div class="direction-rtl text-right bg-gray-100 p-4">
  مرحباً بالعالم
</div>