🔹 Width چیه؟

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

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

1. 📏 عرض ثابت (Fixed width)

• w-0 → 0px

• w-1 → 0.25rem (4px)

• w-2 → 0.5rem (8px)

• w-4 → 1rem (16px)

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

2. 📐 عرض نسبی (Percentage)

• w-1/2 → 50%

• w-1/3 → 33.333%

• w-2/3 → 66.666%

• w-1/4, w-3/4, ... → تقسیمات کسری.

3. 📂 عرض پرکننده (Full / Auto)

• w-full → 100%

• w-screen → عرض کل صفحه (viewport).

• w-auto → عرض خودکار (بر اساس محتوا).

• w-min → حداقل عرض محتوای داخلی.

• w-max → حداکثر عرض محتوای داخلی.

• w-fit → فقط به اندازه محتوا.

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

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

🔹 مثال (عرض نسبی)

<div class="flex bg-gray-200 p-4">
  <div class="w-1/3 bg-green-400 text-white p-2">1/3</div>
  <div class="w-2/3 bg-red-400 text-white p-2">2/3</div>
</div>

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

<div class="w-full bg-purple-400 text-white p-2">
  این باکس کل عرض container رو پر می‌کنه
</div>

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

<div class="w-fit bg-yellow-400 text-black p-2">
  فقط به اندازه متن
</div>

🔹 نکته مهم

• width می‌تونه با ریسپانسیو ترکیب بشه:

  <div class="w-1/2 md:w-1/3 lg:w-1/4">...</div>
  

  📌 روی موبایل نصف عرض، روی دسکتاپ یک‌چهارم.

• Tailwind برای مدیریت grid و flexbox همراه با width خیلی قدرتمند میشه.