RTL Support

Singularity React enables support for Right-to-Left languages, including Arabic, Persian, Hebrew, and others.

Development

We utilized TailwindCSS's RTL and LTR modifiers along with the styles components plugin stylis-plugin-rtl to enable RTL functionality in Singularity React.

stylis-plugin-rtl facilitates Right-to-Left support by mirroring JSS styles along the x-axis. This allows you to develop your application in a Left-to-Right format and convert it to Right-to-Left using the plugin, or vice versa.

TailwindCSS's RTL and LTR modifiers provide a tailored direction variant for your Tailwind project, enabling custom CSS rules for both LTR and RTL layouts. For example:

<div class="text-green-500 text-2xl ltr:pl-4 rtl:pr-4">
    Hello, world.
</div>

Configuration

The theme's text direction is determined by the selected theme language, eliminating the need to manually set a direction value. Refer to Multi Language configurationfor details.