Docs
RTL Support
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="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>