🔹 Height چیه؟

ویژگی height ارتفاع (طول عمودی) یک عنصر رو مشخص می‌کنه.
با Tailwind می‌تونی ارتفاع رو ثابت، پرکننده یا متناسب با صفحه تنظیم کنی.

🔹 کلاس‌های Height در Tailwind

1. ارتفاع ثابت (Fixed Height)

• h-0 → 0px

• h-1 → 0.25rem (4px)

• h-2 → 0.5rem (8px)

• h-4 → 1rem (16px)

• h-64 → 16rem (256px)
  و ... (بر اساس spacing scale پیش‌فرض).

2. ارتفاع پرکننده / نسبی

• h-full → 100% از والد

• h-screen → کل ارتفاع صفحه (viewport)

• h-auto → ارتفاع خودکار بر اساس محتوا

• h-min → حداقل ارتفاع محتوای داخلی

• h-max → حداکثر ارتفاع محتوای داخلی

• h-fit → فقط به اندازه محتوای لازم

🔹 مثال (ارتفاع ثابت)

<div class="h-32 bg-blue-400 text-white p-2">
  باکس با ارتفاع ثابت (128px)
</div>

🔹 مثال (ارتفاع پرکننده)

<div class="h-64 bg-gray-200">
  <div class="h-full bg-green-400 text-white flex items-center justify-center">
    پر کردن کل ارتفاع والد
  </div>
</div>

🔹 مثال (ارتفاع کل صفحه)

<div class="h-screen bg-purple-400 flex items-center justify-center text-white">
  این باکس به اندازه کل ارتفاع صفحه است
</div>

🔹 مثال (ارتفاع متناسب با محتوا)

<div class="h-fit bg-yellow-400 p-2">
  متن کوتاه
</div>
<div class="h-fit bg-red-400 p-2 mt-2">
  متن خیلی خیلی خیلی بلند که ارتفاعش بیشتر میشه
</div>

🔹 نکته مهم

• ارتفاع می‌تونه همراه با ریسپانسیو استفاده بشه:

  <div class="h-32 md:h-64 lg:h-96">...</div>
  

  📌 روی موبایل 128px، روی دسکتاپ 384px.

• برای ساختن layoutهای تمام صفحه (full screen layouts)، خیلی وقت‌ها از h-screen استفاده میشه.