---
title: "نکات کار با Tailwind CSS در پروژه‌های RTL"
description: "راهنمای جامع برای استفاده از Tailwind CSS در پروژه‌های راست به چپ و چالش‌های رایج"
date: "2024-11-08"
tags: ["tailwind", "rtl", "css", "فارسی"]
author: "علی ارغیانی"
draft: false
---

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

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

## چالش‌های RTL

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

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

::blog-callout{type="info" title="نکته مهم"}
Tailwind CSS از نسخه 3 به بعد پشتیبانی بهتری از RTL دارد!
::

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

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

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

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

## استفاده از Logical Properties

به جای `left` و `right` از `start` و `end` استفاده کنید:

```html
<!-- ❌ اشتباه -->
<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)

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

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

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

در CSS:

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

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

## مدیریت Flexbox و Grid

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

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

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

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

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

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

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

### 1. آیکون‌ها

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

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

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

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

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

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

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

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

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

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

::blog-callout{type="warning" title="توجه"}
همیشه پروژه خود را در هر دو حالت RTL و LTR تست کنید!
::

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

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

## نتیجه‌گیری

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

موفق باشید! 🎨
