🔹 Break After چیه؟

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

یعنی می‌تونی مشخص کنی بعد از یک عنصر:

• ستون جدید شروع بشه

• صفحه جدید در پرینت ایجاد بشه

• یا اصلاً شکست ایجاد نشه

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

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

• break-after-avoid → جلوگیری از شکست

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

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

• break-after-page → شکست صفحه جدید

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

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

• break-after-column → شکست ستون

🔹 مثال ساده (شکست ستون)

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

📌 توضیح: بعد از پاراگراف دوم ستون جدید شروع میشه.

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

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

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

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

<div class="columns-3 gap-4">
  <div class="break-after-avoid bg-yellow-100 p-2">این کارت نباید نصفه بشکنه</div>
  <div class="break-after-column bg-pink-100 p-2">ستون جدید از اینجا</div>
  <div class="bg-blue-100 p-2">این متن توی ستون بعدی میاد</div>
</div>

🔹 نکته مهم

• break-after بیشتر توی طراحی پرینت و PDF یا layout چند ستونه استفاده میشه.

• برای ریسپانسیو گریدها معمولاً break-inside-avoid کاربردی‌تره.

• این قابلیت با CSS Fragmentation کار می‌کنه و همه مرورگرها کامل ساپورت نمی‌کنن (خصوصاً پرینت).