🔹 Break Before چیه؟

کلاس‌های break-before در Tailwind برای کنترل رفتار شروع ستون یا صفحه جدید (page/column break) قبل از یک عنصر استفاده میشه.

یعنی می‌تونی مشخص کنی که:

• یک عنصر همیشه توی ستون/صفحه جدید شروع بشه

• یا جلوی شکست قبل از اون گرفته بشه

🔹 کلاس‌های اصلی Break Before

• break-before-auto → رفتار پیش‌فرض مرورگر

• break-before-avoid → جلوگیری از شکست قبل از عنصر

• break-before-all → اجبار به شکست (page/column/region)

• break-before-avoid-page → جلوگیری از شکست صفحه

• break-before-page → شروع در یک صفحه جدید

• break-before-left → شروع در صفحه سمت چپ (پرینت)

• break-before-right → شروع در صفحه سمت راست (پرینت)

• break-before-column → شروع ستون جدید

🔹 مثال ساده (ستون جدید قبل از عنصر)

<div class="columns-2 gap-4">
  <p>ستون اول</p>
  <p class="break-before-column">این متن از ستون دوم شروع میشه</p>
  <p>این متن هم ادامه ستون دوم</p>
</div>

📌 توضیح: عنصر با کلاس break-before-column ستون رو می‌شکنه و خودش ابتدای ستون بعدی قرار می‌گیره.

🔹 مثال در پرینت (page break)

<div>
  <div class="p-4 bg-blue-200">
    بخش اول (صفحه اول)
  </div>
  <div class="break-before-page p-4 bg-green-200">
    بخش دوم (شروع صفحه جدید در پرینت)
  </div>
  <div class="p-4 bg-red-200">
    بخش سوم (همون صفحه دوم ادامه پیدا می‌کنه)
  </div>
</div>

📌 در پرینت، بخش دوم همیشه در یک صفحه جدید شروع میشه.

🔹 استفاده ترکیبی

<div class="columns-3 gap-4">
  <div class="bg-yellow-100 p-2">کارت ۱</div>
  <div class="break-before-column bg-pink-100 p-2">این کارت باید ستون جدید شروع کنه</div>
  <div class="bg-blue-100 p-2">کارت ۳</div>
</div>

🔹 نکته مهم

• break-before دقیقاً مشابه break-after هست، فقط نقطه شکست رو قبل از عنصر اعمال می‌کنه.

• خیلی به درد طراحی برای پرینت یا PDF می‌خوره.

• توی طراحی وب معمولی کمتر استفاده میشه، مگر در layout چندستونه.