Does Tailwind CSS support `direction: rtl` and Text Direction?

Tailwind CSS does support RTL modifiers, but Tailwind CSS does not support the direction CSS property currently.

There are also discussions about adding Tailwind classes to support writing-mode and text-orientation.

You can use the RTL modifiers like so:

Copy
html<div dir="rtl">
    <div className="ltr:pl-4 rtl:pr-4">
        Lorem ipsum dolor sit amet
    </div>
</div>

However, when building things like an interactive, hoverable star rating using Tailwind CSS, the lack of a direction property can be a small inconvenience.

Luckily, it's simple enough to add your own utility classes. Here are some helpful additional utility classes you can copy to your Tailwind project:

Copy
css.direction-rtl {
    direction: rtl;
}

.direction-ltr {
    direction: ltr;
}

/** As suggested by M0hammedImran on Github */
.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-vertical-lr {
    writing-mode: vertical-lr;
}

.writing-vertical-rl {
    writing-mode: vertical-rl;
}

.writing-horizontal-tb {
    writing-mode: horizontal-tb;
}

Hopefully Tailwind CSS can add these text direction and direction properties in the future.