ایجاد شده در ۲۰ بهمن ۱۴۰۴
📦 Container در Tailwind
• کلاس اصلی: container
• برای محدود کردن عرض محتوا و وسطچین کردن layout
• بهصورت پیشفرض:
- width: 100%
- با breakpointها max-width میگیرد
📐 رفتار container در breakpointها
• sm → md → lg → xl → 2xl
• در هر breakpoint:
- عرض ثابتتر میشود
- از کش آمدن بیش از حد محتوا جلوگیری میکند
🛠 شخصیسازی container
• از طریق tailwind.config.js
• تنظیم:
- padding
- center
- screens
📍 تفاوت container با max-w
• container:
- responsive
- وابسته به breakpoint
• max-w-*: - کنترل دقیق عرض
- مستقل از breakpoint
📌 برای صفحات اصلی → container
📌 برای کامپوننتها → max-w
🧱 break-before
• کنترل شکست قبل از المان
🧱 break-after
• کنترل شکست بعد از المان
• مشابه break-before ولی بعد از عنصر
- break-after-column
📌 کاربردهای واقعی break-before / break-after
• جلوگیری از شکستن کارتها
• کنترل صفحهبندی در print
• مدیریت چیدمان در multi-column
• استفاده در gridهای پیچیده محتوامحور