4.8 KiB
title, description, date, tags, author, draft
| title | description | date | tags | author | draft | ||||
|---|---|---|---|---|---|---|---|---|---|
| نکات کار با Tailwind CSS در پروژه‌های RTL | راهنمای جامع برای استفاده از Tailwind CSS در پروژه‌های راست به چپ و چالش‌های رایج | 2024-11-08 |
|
علی ارغیانی | 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 را به صورت داینامیک تنظیم کنید:
<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>
::alert{type="success"} 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 را مستند کنید
::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 و تست مداوم کلید موفقیت است.
موفق باشید! 🎨