La clase ring en Tailwind CSS aplica un box-shadow sólido y concéntrico alrededor del elemento, simulando un borde externo. A diferencia del border, el ring no ocupa espacio ni modifica el layout, ya que es visualmente generado por sombra (box-shadow) en lugar de formar parte del modelo de caja. Es ideal para indicar foco (focus), selección o énfasis visual, especialmente en botones o campos de formulario.
| Clase Tailwind | CSS equivalente | Ejemplo |
|---|---|---|
| ring | box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5); | |
| ring-2 | box-shadow: 0 0 0 2px ...; | |
| ring-4 | box-shadow: 0 0 0 4px ...; | |
| ring-[6px] | box-shadow: 0 0 0 6px ...; | |
| ring-red-500 | box-shadow-color: rgba(239, 68, 68); | |
| ring-[#00ffcc] | box-shadow-color: #00ffcc; | |
| ring-opacity-50 | --tw-ring-opacity: 0.5; | |
| ring-green-500/25 | box-shadow-color: rgba(34, 197, 94, 0.25); | |
| ring-offset-2 | --tw-ring-offset-width: 2px; | |
| ring-offset-[6px] | --tw-ring-offset-width: 6px; | |
| ring-offset-green-200 | --tw-ring-offset-color: #22c55e; |