• customization
  • RTL

customization

RTL

Learn how to setup and configure bidirectional text formats (RTL and LTR) in your project using native Tailwind CSS variants and the FlyonUI components.

RTL(right-to-left)

RTL (right-to-left) is a text orientation used for languages such as Arabic, Hebrew, Persian, Urdu, and Yiddish, spoken by over 500 million people. It is also among the fastest-growing language groups online.

All FlyonUI components seamlessly support RTL by leveraging logical CSS properties and values, like using ms-0 instead of ml-0 and pe-4 instead of pr-4. This functionality requires Tailwind CSS v3.3.0.

In this guide, you’ll learn how to set up and configure bidirectional text formats (RTL and LTR) in your project using Tailwind CSS variants and FlyonUI components by modifying the dir attribute on the <html> element.

Setting up RTL

Before you begin, ensure you have the latest version of Tailwind CSS and FlyonUI installed.

To enable RTL support, add the dir attribute to the <html> tag in your index.html file:

<html dir="rtl">
  <!-- your HTML markup -->
</html>

All FlyonUI components are fully compatible with RTL mode, utilizing Tailwind CSS’s logical properties for easy adaptability. You can test this functionality by toggling between LTR and RTL modes using the RTL button below.

Using RTL variants

To implement RTL variants in your custom components, prepend rtl: to the relevant classes. For example, use space-x-5 for horizontal spacing in LTR mode, and rtl:space-x-reverse for the equivalent in RTL mode:

<div class="space-x-5 rtl:space-x-reverse">
  <!-- ... -->
</div>

We recommend using logical properties for margins, paddings, borders, and rounded corners to keep your HTML markup clean and reduce the number of utility classes—beneficial when working with Tailwind CSS.

UI components

All FlyonUI components come with built-in RTL support. By setting the dir attribute to rtl on the <html> element, all examples in the documentation will render correctly. Explore the full range of UI components and examples in our official documentation.