Source: https://jessewaites.com/blog/post/supporting-right-to-left-rtl-languages-with-tailwind-css

# Supporting Right-to-Left (RTL) Languages with Tailwind CSS

*September 18, 2025*

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>
```