Customization

RTL Support

This guide helps you to enable the RTL(Right-to-Left) support for Metronic using Tailwind CSS.

Setup

To globally setup the RTL direction adding a dir attribute on the html as shown below:
<html dir="rtl">
 <!-- HTML markup -->
</html>

Logical CSS Properties

Metronic utilizes the logical CSS properties as the default method for handling RTL support. This approach simplifies RTL support by using context-aware properties that adjust based on the document's text direction.
<!-- Using logical properties -->
<div class="text-start ps-5">
 Example text
</div>

RTL Modifier

For specific cases, you can use the rtl:* Tailwind modifier to easily control alignments for both LTR and RTL directions.
<!-- Using rtl modifier -->
<div class="text-left pl-5 rtl:text-right rtl:pr-5">
 Example text
</div>