تابز مدیا | آموزش قدم به قدم برنامه نویسی

Line Height

Line height در واقع همون فاصله‌ی بین خطوط متن هست (leading).
تو Tailwind با کلاس‌های leading-{value} کنترل میشه.

📑 مقادیر پیش‌فرض Line Height

کلاس	مقدار	توضیح
`leading-none`	`1`	بدون فاصله اضافه
`leading-tight`	`1.25`	فشرده
`leading-snug`	`1.375`	کمی جمع‌تر از نرمال
`leading-normal`	`1.5`	مقدار پیش‌فرض استاندارد
`leading-relaxed`	`1.625`	کمی بازتر
`leading-loose`	`2`	خیلی باز و فاصله‌دار

📑 مقادیر سفارشی (عدد ثابت)

کلاس	مقدار
`leading-3`	`0.75rem` (12px)
`leading-4`	`1rem` (16px)
`leading-5`	`1.25rem` (20px)
`leading-6`	`1.5rem` (24px)
`leading-7`	`1.75rem` (28px)
`leading-8`	`2rem` (32px)
`leading-9`	`2.25rem` (36px)
`leading-10`	`2.5rem` (40px)

📌 مثال ساده


<div class="p-4 w-96 bg-gray-100">
  <p class="leading-tight">
    این متن با leading-tight نوشته شده است. خطوط خیلی به هم نزدیک هستند.
  </p>

  <p class="leading-relaxed mt-4">
    این متن با leading-relaxed نوشته شده است. فاصله‌ی بین خطوط کمی بازتر شده.
  </p>

  <p class="leading-loose mt-4">
    این متن با leading-loose نوشته شده است. خطوط خیلی از هم فاصله دارند.
  </p>
</div>

🎯 نکته:

برای عنوان‌ها (heading) معمولاً leading-tight یا leading-snug خوبه.
برای متون بلند (paragraphs) معمولاً leading-relaxed یا leading-loose خوانایی بیشتری داره.
می‌تونی داخل tailwind.config.js مقادیر سفارشی هم تعریف کنی.