This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any ring-offset. In CSS, we do that by using the CSS Color property.
Ring Color classes:
ring-offset-transparent: The ring-offset color will be transparent.
ring-offset-current: The ring-offset color will depend on the parent element color.
ring-offset-black: The ring-offset color will be black.
ring-offset-white: The ring-offset color will be white.
ring-offset-gray-50: The ring-offset color will be gray.
ring-offset-red-50: The ring-offset color will be red.
ring-offset-blue-50: The ring-offset color will be blue.
ring-offset-indigo-50: The ring-offset color will be indigo.
ring-offset-purple-50: The ring-offset color will be purple.
ring-offset-green-50: The ring-offset color will be green.
ring-offset-yellow-50: The ring-offset color will be yellow.
ring-offset-pink-50: The ring-offset color will be pink.
Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.
Syntax:
<button class="ring-offset-{color}">...</button >
Example:
Note: Currently the browsers are not supported by Tailwind CSS Ring Width, so for the output, I share the link of the output (Tailwind CSS Playground)
