📌 این ویژگی مشخص می‌کنه که رنگ فضای بین حلقه (ring) و باکس عنصر چه رنگی باشد.
در Tailwind از کلاس‌های ring-offset-{color} استفاده می‌کنیم.

✅ کلاس‌ها

• ring-offset-black → فضای offset سیاه

• ring-offset-white → فضای offset سفید

• ring-offset-gray-500 → فضای offset خاکستری

• ring-offset-red-500 → فضای offset قرمز

• ring-offset-green-500 → فضای offset سبز

• ring-offset-blue-500 → فضای offset آبی

• ring-offset-yellow-500 → فضای offset زرد

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

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

✅ مثال

<button class="ring-2 ring-black ring-offset-0 p-2 mb-2">
  offset پیش‌فرض
</button>

<button class="ring-2 ring-red-500 ring-offset-2 ring-offset-white p-2 mb-2">
  offset سفید 2px
</button>

<button class="ring-4 ring-green-500 ring-offset-4 ring-offset-gray-500 p-2 mb-2">
  offset خاکستری 4px
</button>

<button class="ring-4 ring-blue-500 ring-offset-8 ring-offset-[#ff5733] p-2 mb-2">
  offset رنگ دلخواه 8px
</button>

📌 نکات مهم

• Ring Offset Color همیشه همراه با ring-width, ring-color و ring-offset-width استفاده می‌شود تا ظاهر کامل حلقه مشخص شود.

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

  • sm:ring-offset-gray-300 md:ring-offset-blue-500 → موبایل خاکستری، دسکتاپ آبی