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.

How to use RTL modifiers in Tailwind CSS

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>

This is great for multi-directional layouts, such as adding compatability with Arabic languages.

How to use direction property in Tailwind CSS

The direction property defines the direction of text, table, and grid columns. MDN recommends using the HTML dir attribute instead of the CSS direction property.

However, when building things like an interactive, hoverable star rating using Tailwind CSS, you may want to use a direction property.

Note

As of writing, TailwindCSS does not natively support the CSS direction property.

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.