Getting Started
RTL Support
This guide helps you to enable the RTL(Right-to-Left) support for Metronic using Tailwind.
Setup
To globally setup the RTL direction adding a dir="rtl" attribute on the html as shown below:
<!-- Setup rtl mode -->
<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="ps-5 text-start">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="pl-5 text-left rtl:pr-5 rtl:text-right">Example text</div>