mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
181 lines
4.8 KiB
Markdown
181 lines
4.8 KiB
Markdown
---
|
|
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 و تست مداوم کلید موفقیت است.
|
|
|
|
موفق باشید! 🎨
|