🔹 Max-Width چیه؟

ویژگی max-width بیشترین عرض مجاز برای یک عنصر رو تعیین می‌کنه.
📌 یعنی عنصر می‌تونه کوچیک‌تر بشه (با توجه به صفحه یا محتوا) ولی هیچ وقت بزرگ‌تر از اون مقدار نمیشه.

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

1. مقادیر پایه (Size Scale)

• max-w-0 → 0px

• max-w-xs → 20rem (320px)

• max-w-sm → 24rem (384px)

• max-w-md → 28rem (448px)

• max-w-lg → 32rem (512px)

• max-w-xl → 36rem (576px)

• max-w-2xl → 42rem (672px)

• max-w-3xl → 48rem (768px)

• max-w-4xl → 56rem (896px)

• max-w-5xl → 64rem (1024px)

• max-w-6xl → 72rem (1152px)

• max-w-7xl → 80rem (1280px)

2. عرض کامل و ویژه

• max-w-full → 100% از container

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

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

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

• max-w-screen-sm, max-w-screen-md, max-w-screen-lg, ... → محدودیت عرض براساس breakpointهای ریسپانسیو

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

<div class="max-w-md bg-blue-400 text-white p-4">
  این باکس هیچ وقت بزرگ‌تر از 28rem (448px) نمیشه
</div>

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

<div class="max-w-full bg-green-400 text-white p-4">
  این باکس حداکثر می‌تونه 100% container باشه
</div>

🔹 مثال (ریسپانسیو با max-width)

<div class="max-w-sm md:max-w-lg lg:max-w-2xl bg-purple-400 text-white p-4">
  این باکس روی موبایل کوچک، روی دسکتاپ بزرگ‌تر میشه
</div>

🔹 نکته مهم

• توی طراحی container ها (مثل card، modal، form) خیلی از max-width استفاده میشه.

• همراه با margin: auto میشه محتوای مرکزی (centered content) ایجاد کرد:

  <div class="max-w-lg mx-auto bg-yellow-400 p-4">
    محتوای وسط چین
  </div>