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

✅ کلاس‌ها

• divide-black → جداکننده سیاه

• divide-white → جداکننده سفید

• divide-gray-500 → جداکننده خاکستری

• divide-red-500 → جداکننده قرمز

• divide-green-500 → جداکننده سبز

• divide-blue-500 → جداکننده آبی

• divide-yellow-500 → جداکننده زرد

📌 می‌توان از رنگ دلخواه نیز استفاده کرد:

• divide-[#ff5733] → رنگ HEX دلخواه

✅ مثال

<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 mb-2">
  <div class="py-2">فرزند ۱</div>
  <div class="py-2">فرزند ۲</div>
  <div class="py-2">فرزند ۳</div>
</div>

<div class="flex divide-x divide-[#ff5733] mb-2">
  <div class="px-4">فرزند ۱</div>
  <div class="px-4">فرزند ۲</div>
  <div class="px-4">فرزند ۳</div>
</div>

📌 نکات مهم

• Divide Color همیشه با divide-x یا divide-y ترکیب می‌شود تا خطوط افقی یا عمودی رنگی شوند.

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

  • sm:divide-gray-300 md:divide-red-500 → موبایل خاکستری، دسکتاپ قرمز

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