🔹 Size چیه؟

ویژگی size در Tailwind یک شورتکات برای تنظیم همزمان width و height هست.
📌 یعنی وقتی size بدی، هم عرض و هم ارتفاع عنصر روی همون مقدار تنظیم میشه.

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

• size-0 → width: 0px; height: 0px;

• size-1 → 0.25rem (4px)

• size-2 → 0.5rem (8px)

• size-4 → 1rem (16px)

• size-8 → 2rem (32px)

• size-16 → 4rem (64px)

• size-32 → 8rem (128px)

• size-64 → 16rem (256px)

• size-px → 1px

و همینطور بقیه مقادیر scale مثل w- و h-.

🔹 مثال (باکس مربعی با size)

<div class="size-32 bg-blue-400 text-white flex items-center justify-center">
  Box
</div>

📌 این باکس هم عرض و هم ارتفاعش 128px میشه.

🔹 مثال (size همراه با ریسپانسیو)

<div class="size-16 md:size-32 lg:size-64 bg-green-400 text-white flex items-center justify-center">
  Responsive Box
</div>

📌 روی موبایل کوچیکه (64px)، روی دسکتاپ بزرگ میشه (256px).

🔹 مثال (استفاده برای آواتار)

<img src="https://via.placeholder.com/150"
     class="size-24 rounded-full border-4 border-purple-500" />

📌 خیلی مناسب برای ساختن آواتار دایره‌ای یا آیکون‌های مربعی.

🔹 نکته مهم

• size فقط یک شورتکاته و معادل استفاده همزمان از w- و h-.

• برای طراحی آیکون‌ها، دکمه‌های مربعی، آواتارها و کارت‌های مربعی خیلی استفاده میشه.

• می‌تونی با max-size-* یا min-size-* هم کار کنی (در نسخه‌های جدید Tailwind اضافه شده).