🔹 Box Decoration Break چیه؟

کلاس‌های box-decoration-break توی Tailwind تعیین می‌کنن که وقتی یک المان به چند خط یا چند بخش شکسته میشه (مثلاً داخل ستون‌ها یا در متن چند خطی):

• استایل border / background / padding برای کل المان حساب بشه

• یا برای هر خط/بخش جداگانه اعمال بشه

🔹 کلاس‌های اصلی Box Decoration Break

• box-decoration-clone → استایل (border, background, padding) روی هر خط/بخش جداگانه اعمال میشه

• box-decoration-slice → استایل فقط یکبار برای کل المان اعمال میشه (حالت پیش‌فرض)

🔹 مثال ساده (Clone)

<p class="box-decoration-clone bg-pink-300 text-black p-2">
  این متن طولانیه و به چند خط می‌شکنه.
</p>

📌 توضیح: وقتی متن چند خط بشه، پس‌زمینه و padding برای هر خط جداگانه اعمال میشه.

🔹 مثال (Slice)

<p class="box-decoration-slice bg-blue-300 text-black p-2">
  این متن طولانیه و به چند خط می‌شکنه.
</p>

📌 توضیح: در این حالت، پس‌زمینه و padding برای کل بلوک متن در نظر گرفته میشه، نه برای هر خط جدا.

🔹 تفاوت تصویری (Clone vs Slice)

<div class="space-y-4 w-40">
  <p class="box-decoration-slice bg-green-200 p-2">
    Box Decoration Slice - استایل برای کل متن
  </p>

  <p class="box-decoration-clone bg-yellow-200 p-2">
    Box Decoration Clone - استایل برای هر خط جدا
  </p>
</div>

🔹 نکته مهم

• clone بیشتر برای متن‌های هایلایت شده یا برجسته استفاده میشه.

• slice حالت پیش‌فرض و طبیعی CSS هست.

• این قابلیت وقتی بهتر دیده میشه که متن یا المان توی چند خط بشکنه.