---
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
```
## استفاده از Logical Properties
به جای `left` و `right` از `start` و `end` استفاده کنید:
```html
محتوا
محتوا
```
کلاس‌های 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
```
::alert{type="success"}
Flexbox و Grid در Tailwind به صورت خودکار با dir="rtl" سازگار می‌شوند!
::
## کلاس‌های شرطی RTL/LTR
برای استایل‌های خاص RTL یا LTR:
```html
متن دو زبانه
```
## مشکلات رایج و راه‌حل‌ها
### 1. آیکون‌ها
برخی آیکون‌ها نیاز به چرخش در RTL دارند:
```vue
```
### 2. بلوک‌های کد
بلوک‌های کد باید همیشه LTR باشند:
```css
pre, code {
direction: ltr !important;
text-align: left !important;
}
```
### 3. اعداد انگلیسی
اعداد انگلیسی در متن فارسی:
```html
123
```
## بهترین روش‌ها
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 و تست مداوم کلید موفقیت است.
موفق باشید! 🎨