tailwindcss-vanilla-rtl

Simple right-to-left (RTL) language support for Tailwind, switching vanilla utilities to CSS logical properties and values.

How it works

This plugin overrides core Tailwind plugins, to replace the physical properties and values with logical equivalents.
Class names are kept as-is, so any project can add RTL support without changing any styles.
Here’s an example: 


<blockquote dir="rtl" lang="en" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
  Let the beauty of what you love be what you do.
</blockquote>
<blockquote dir="rtl" lang="ar" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
    ما تبحث عنه يبحث عنك
</blockquote>
<blockquote dir="rtl" lang="he" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
  האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.
</blockquote>
<blockquote dir="rtl" lang="fa" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
  از محبت، نار نوری می‌شود// وز محبت، دیو حوری می‌شود
</blockquote>

Aside from specifying their dir and lang attributes, all blockquotes are written in a single direction – which then appears differently based on the writing direction.

View the project documentation on GitHub to learn more.

Demo

Let the beauty of what you love be what you do.
ما تبحث عنه يبحث عنك
האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.
از محبت، نار نوری می‌شود// وز محبت، دیو حوری می‌شود