📌 این ویژگی مشخص می‌کنه که سبک خطوط جداکننده بین عناصر فرزند (children) در یک container چگونه باشد.
در Tailwind از کلاس‌های divide-{style} استفاده می‌کنیم.

✅ کلاس‌ها

• divide-solid → خطوط ساده و پیوسته (default)

• divide-dashed → خطوط خط‌چین

• divide-dotted → خطوط نقطه‌نقطه

• divide-double → خطوط دو خط

• divide-none → بدون خط جداکننده

📌 می‌توان با کلاس‌های divide-width و divide-color ترکیب شود تا ظاهر کامل خطوط مشخص شود.

✅ مثال

<div class="flex divide-x divide-solid divide-gray-500 mb-2">
  <div class="px-4">فرزند ۱</div>
  <div class="px-4">فرزند ۲</div>
  <div class="px-4">فرزند ۳</div>
</div>

<div class="flex divide-x divide-dashed divide-red-500 mb-2">
  <div class="px-4">فرزند ۱</div>
  <div class="px-4">فرزند ۲</div>
  <div class="px-4">فرزند ۳</div>
</div>

<div class="flex divide-y divide-dotted divide-green-500 mb-2">
  <div class="py-2">فرزند ۱</div>
  <div class="py-2">فرزند ۲</div>
  <div class="py-2">فرزند ۳</div>
</div>

<div class="flex divide-y divide-double divide-blue-500 mb-2">
  <div class="py-2">فرزند ۱</div>
  <div class="py-2">فرزند ۲</div>
  <div class="py-2">فرزند ۳</div>
</div>

📌 نکات مهم

• اغلب divide-style همراه با divide-width و divide-color استفاده می‌شود.

• می‌توان با responsive ترکیب کرد:

  • sm:divide-dashed md:divide-solid → موبایل خط‌چین، دسکتاپ ساده

• فقط روی direct children اعمال می‌شود.