نکات کار با Tailwind CSS در پروژه‌های RTL

۱۸ آبان ۱۴۰۳ 4 دقیقه مطالعه علی ارغیانی

tailwindrtlcssفارسی

استفاده از Tailwind CSS در پروژه‌های راست به چپ (RTL) می‌تواند چالش‌برانگیز باشد. در این مقاله، نکات و راهکارهای عملی برای کار با Tailwind در پروژه‌های فارسی و عربی را بررسی می‌کنیم.

چالش‌های RTL

پروژه‌های RTL با چالش‌های خاصی روبرو هستند:

جهت‌دهی: تغییر جهت layout از چپ به راست
Margin و Padding: تبدیل left/right به start/end
فونت‌ها: انتخاب فونت‌های مناسب فارسی
کامپوننت‌ها: سازگاری کامپوننت‌های third-party

نکته مهم

Tailwind CSS از نسخه 3 به بعد پشتیبانی بهتری از RTL دارد!

تنظیمات اولیه

ابتدا باید attribute

dir

را به صورت داینامیک تنظیم کنید:

<template>
  <html :dir="locale === 'fa' ? 'rtl' : 'ltr'">
    <body>
      <NuxtPage />
    </body>
  </html>
</template>

<script setup>
const { locale } = useI18n()
</script>

استفاده از Logical Properties

به جای

left

right

از

start

end

استفاده کنید:

<!-- ❌ اشتباه -->
<div class="ml-4 pr-2">محتوا</div>

<!-- ✅ درست -->
<div class="ms-4 pe-2">محتوا</div>

کلاس‌های Logical در Tailwind:

```
ms-*
```
به جای
```
ml-*
```
(margin-start)
```
me-*
```
به جای
```
mr-*
```
(margin-end)
```
ps-*
```
به جای
```
pl-*
```
(padding-start)
```
pe-*
```
به جای
```
pr-*
```
(padding-end)

تنظیم فونت‌های فارسی

فونت‌های فارسی نیاز به تنظیمات خاصی دارند:

// nuxt.config.ts
export default defineNuxtConfig({
  fonts: {
    families: [
      { 
        name: 'Vazirmatn', 
        provider: 'google',
        weights: [400, 500, 600, 700]
      }
    ]
  }
})

در CSS:

[dir="rtl"] {
  font-family: 'Vazirmatn', sans-serif;
}

[dir="ltr"] {
  font-family: 'Inter', sans-serif;
}

مدیریت Flexbox و Grid

Flexbox و Grid به صورت خودکار با RTL سازگار می‌شوند:

<div class="flex justify-start gap-4">
  <!-- در RTL از راست شروع می‌شود -->
  <div>آیتم 1</div>
  <div>آیتم 2</div>
  <div>آیتم 3</div>
</div>

Flexbox و Grid در Tailwind به صورت خودکار با dir="rtl" سازگار می‌شوند!

کلاس‌های شرطی RTL/LTR

برای استایل‌های خاص RTL یا LTR:

<div class="ltr:text-left rtl:text-right">
  متن دو زبانه
</div>

مشکلات رایج و راه‌حل‌ها

1. آیکون‌ها

برخی آیکون‌ها نیاز به چرخش در RTL دارند:

<template>
  <UIcon 
    name="i-heroicons-arrow-right" 
    :class="{ 'rtl:rotate-180': true }"
  />
</template>

2. بلوک‌های کد

بلوک‌های کد باید همیشه LTR باشند:

pre, code {
  direction: ltr !important;
  text-align: left !important;
}

3. اعداد انگلیسی

اعداد انگلیسی در متن فارسی:

<span class="font-mono ltr:inline-block">
  123
</span>

بهترین روش‌ها

از Logical Properties استفاده کنید: همیشه
```
start/end
```
به جای
```
left/right
```
تست کنید: هر دو حالت RTL و LTR را تست کنید
فونت مناسب: از فونت‌های استاندارد فارسی استفاده کنید
کامپوننت‌های سازگار: کامپوننت‌هایی که RTL را پشتیبانی می‌کنند انتخاب کنید
مستندسازی: تغییرات RTL را مستند کنید

توجه

همیشه پروژه خود را در هر دو حالت RTL و LTR تست کنید!

ابزارهای مفید

Tailwind RTL Plugin: پلاگین رسمی Tailwind برای RTL
PostCSS RTL: تبدیل خودکار CSS به RTL
Browser DevTools: برای debug کردن مشکلات layout

نتیجه‌گیری

کار با Tailwind CSS در پروژه‌های RTL با رعایت نکات ذکر شده می‌تواند بسیار ساده و کارآمد باشد. استفاده از Logical Properties و تست مداوم کلید موفقیت است.

موفق باشید! 🎨