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

✅ کلاس‌ها

• ring-0 → بدون حلقه

• ring → حلقه پیش‌فرض (1px)

• ring-1 → ضخامت 1px

• ring-2 → ضخامت 2px

• ring-4 → ضخامت 4px

• ring-8 → ضخامت 8px

• ring-[value] → ضخامت دلخواه با px, rem و غیره

📌 Ring معمولاً همراه با ring-color و ring-offset استفاده می‌شود.

✅ مثال

<button class="ring ring-black p-2 mb-2">
  حلقه پیش‌فرض
</button>

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

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

<button class="ring-8 ring-blue-500 p-2 mb-2">
  حلقه آبی 8px
</button>

<button class="ring-0 p-2 mb-2">
  بدون حلقه
</button>

📌 نکات مهم

• Ring Width همیشه با ring-color و ring-offset ترکیب می‌شود.

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

  • sm:ring-2 md:ring-4 → موبایل 2px، دسکتاپ 4px