🔹 Box Sizing چیه؟

در CSS، خاصیت box-sizing مشخص می‌کنه که مرورگر چطور اندازه‌ی یک المان رو حساب کنه:

• آیا فقط محتوا (content) رو در نظر بگیره؟

• یا اینکه border و padding هم جزو اندازه باشن؟

Tailwind برای این کار کلاس‌های آماده داره.

🔹 کلاس‌های Box Sizing در Tailwind

• box-content → حالت پیش‌فرض (فقط محتوا حساب میشه)

• box-border → padding و border هم توی اندازه حساب میشه

🔹 مثال (box-content)

<div class="box-content h-16 w-32 p-4 border-4 bg-blue-200">
  box-content
</div>

📌 توضیح: اینجا اندازه‌ی نهایی فقط محتوا هست (عرض = 32، ارتفاع = 16).
padding و border به این ابعاد اضافه میشن و باعث بزرگ‌تر شدن کل المان میشن.

🔹 مثال (box-border)

<div class="box-border h-16 w-32 p-4 border-4 bg-green-200">
  box-border
</div>

📌 توضیح: اینجا اندازه‌ی نهایی شامل محتوا + padding + border میشه.
پس کل المان دقیقاً همون 32x16 باقی می‌مونه.

🔹 مقایسه دو حالت کنار هم

<div class="flex space-x-4">
  <div class="box-content h-16 w-32 p-4 border-4 bg-blue-200">
    box-content
  </div>
  <div class="box-border h-16 w-32 p-4 border-4 bg-green-200">
    box-border
  </div>
</div>

📌 توی این حالت می‌بینی که box-content بزرگ‌تر از box-border نمایش داده میشه.

🔹 نکته مهم

• اکثر پروژه‌ها ترجیح میدن همیشه از box-border استفاده کنن چون کنترل دقیق‌تری روی سایز میده.

• خود Tailwind به صورت پیش‌فرض با Preflight CSS همه‌ی المان‌ها رو box-border می‌کنه.

• اگه بخوای یه المان خاص مثل حالت پیش‌فرض CSS باشه می‌تونی box-content استفاده کنی.