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

✅ کلاس‌ها

• ring-black → حلقه سیاه

• ring-white → حلقه سفید

• ring-gray-500 → حلقه خاکستری

• ring-red-500 → حلقه قرمز

• ring-green-500 → حلقه سبز

• ring-blue-500 → حلقه آبی

• ring-yellow-500 → حلقه زرد

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

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

✅ مثال

<button class="ring-2 ring-black p-2 mb-2">
  حلقه سیاه
</button>

<button class="ring-2 ring-red-500 p-2 mb-2">
  حلقه قرمز
</button>

<button class="ring-4 ring-green-500 p-2 mb-2">
  حلقه سبز
</button>

<button class="ring-4 ring-[#ff5733] p-2 mb-2">
  حلقه رنگ دلخواه
</button>

📌 نکات مهم

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

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

  • sm:ring-red-500 md:ring-blue-500 → موبایل قرمز، دسکتاپ آبی