🔹 Container چیه؟

کلاس container توی Tailwind برای ساخت یک بخش مرکزی و واکنش‌گرا (responsive) استفاده میشه.
یعنی محتوا رو وسط صفحه نگه می‌داره و حداکثر عرضش رو بر اساس breakpoints تنظیم می‌کنه.

🔹 استفاده ساده از Container

<div class="container bg-gray-200">
  <h1>سلام دنیا</h1>
  <p>این یک متن نمونه است.</p>
</div>

📌 پیش‌فرض:

• همیشه عرض 100% داره

• توی هر breakpoint حداکثر عرض مشخص می‌گیره

• به صورت پیش‌فرض margin: auto می‌گیره تا وسط باشه

🔹 Breakpoints پیش‌فرض برای Container

Tailwind مقادیر container رو با توجه به صفحه تنظیم می‌کنه:

• sm → 640px

• md → 768px

• lg → 1024px

• xl → 1280px

• 2xl → 1536px

📌 مثال:

<div class="container mx-auto bg-blue-100">
  محتوای من وسط و واکنش‌گراست
</div>

🔹 شخصی‌سازی Container

توی tailwind.config.js می‌تونی container رو سفارشی کنی:

module.exports = {
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
      },
    },
  },
}

📌 حالا:

• center: true → همیشه وسط چین

• padding → فاصله داخلی ثابت

• screens → مقادیر دلخواه برای breakpoints

🔹 مثال کامل

<div class="container bg-green-100">
  <h2 class="text-xl font-bold">Container سفارشی</h2>
  <p>این بخش همیشه وسط و با padding مشخص نمایش داده میشه.</p>
</div>

🔹 نکته مهم

• همیشه برای لایه‌بندی اصلی صفحات از container استفاده کن.

• با mx-auto مطمئن میشی که توی وسط صفحه باشه.

• می‌تونی توی پروژه‌های بزرگ padding ثابت بهش بدی تا همیشه منظم باشه.