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

✅ کلاس‌ها

تعیین جهت جداکننده

• divide-x → جداکننده افقی بین فرزندان

• divide-y → جداکننده عمودی بین فرزندان

تعیین ضخامت جداکننده

• divide-x-0, divide-y-0 → بدون جداکننده

• divide-x-2, divide-y-2 → ضخامت 2px

• divide-x-4, divide-y-4 → ضخامت 4px

• divide-x-8, divide-y-8 → ضخامت 8px

✅ مثال

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

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

📌 نکات مهم

• رنگ جداکننده با کلاس divide-{color} تعیین می‌شود:

  • مثال: divide-gray-500, divide-red-500

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

  • sm:divide-x md:divide-y → موبایل افقی، دسکتاپ عمودی

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