🔹 Min-Width چیه؟

ویژگی min-width حداقل عرض یک عنصر رو مشخص می‌کنه.
یعنی عرض عنصر هیچ‌وقت کمتر از اون مقدار نمیشه، حتی اگه محتوا یا والد کوچیک باشه.

🔹 کلاس‌های Min-Width در Tailwind

1. مقادیر ثابت (Fixed)

• min-w-0 → مقدار حداقل 0px.

• min-w-full → حداقل عرض 100%.

• min-w-min → حداقل عرض برابر با کوچک‌ترین مقدار محتوای داخلی.

• min-w-max → حداقل عرض برابر با بزرگ‌ترین مقدار محتوای داخلی.

• min-w-fit → حداقل عرض به اندازه محتوای لازم (fit-content).

2. مقادیر Scale (بر اساس spacing scale)

• min-w-16 → 4rem (64px).

• min-w-32 → 8rem (128px).

• min-w-64 → 16rem (256px).
  و ...

🔹 مثال (min-width ثابت)

<div class="min-w-64 bg-blue-400 text-white p-2">
  حداقل عرض این باکس 16rem (256px) هست
</div>

🔹 مثال (min-width برابر محتوا)

<div class="min-w-fit bg-green-400 text-white p-2">
  متن کوتاه
</div>
<div class="min-w-fit bg-red-400 text-white p-2 mt-2">
  متن خیلی خیلی خیلی بلند
</div>

📌 هر باکس حداقل به اندازه متن خودش پهن میشه.

🔹 مثال (min-width: full)

<div class="flex bg-gray-200 p-4">
  <div class="min-w-full bg-purple-400 text-white p-2">
    این باکس حداقل باید 100% عرض container رو بگیره
  </div>
</div>

🔹 نکته مهم

• min-width مخصوصا توی ریسپانسیو دیزاین خیلی کاربرد داره.
  مثلاً وقتی می‌خوای کارت‌ها توی موبایل حداقل عرض مشخصی داشته باشن و روی دسکتاپ کنار هم قرار بگیرن.

• ترکیبش با flex و grid باعث میشه کنترل بهتری روی اندازه عناصر داشته باشی.