blog mvp completed

2026-08-15 20:52:49 +03:30 · 2025-11-09 15:31:41 +03:30
parent c7e5eb0713
commit d2333d3db2
24 changed files with 1171 additions and 175 deletions
@@ -3,7 +3,6 @@ title: "آشنایی با Nuxt Content"
 description: "یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارک‌داون، هایلایت کد و کامپوننت‌های Vue پشتیبانی می‌کند."
 date: "2024-11-09"
 tags: ["nuxt", "vue", "آموزش", "فارسی"]
-image: "/img/blog/nuxt-content-cover.jpg"
 author: "علی ارغیانی"
 draft: false
 ---
@@ -0,0 +1,180 @@
+---
+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 و تست مداوم کلید موفقیت است.
+
+موفق باشید! 🎨
@@ -3,7 +3,6 @@ title: "راهنمای Composition API در Vue 3"
 description: "آموزش کامل Composition API در Vue 3 با مثال‌های کاربردی و بهترین روش‌های پیاده‌سازی."
 date: "2024-11-07"
 tags: ["vue", "composition-api", "آموزش", "فارسی"]
-image: "/img/blog/vue-composition.jpg"
 author: "علی ارغیانی"
 draft: false
 ---