Tailwind CSS Ring Color

This class accepts lots of value in in which all the properties are covered in class form. By using this class we can color any ring. In CSS, we do that by using the.

Ring Color classes:

• ring-transparent: The ring color will be transparent.
• ring-current: The ring color will depend on the parent element color.
• ring-black: The ring color will be black.
• ring-white: The ring color will be white.
• ring-gray-50: The ring color will be gray.
• ring-red-50: The ring color will be red.
• ring-blue-50: The ring color will be blue.
• ring-indigo-50: The ring color will be indigo.
• ring-purple-50: The ring color will be purple.
• ring-green-50: The ring color will be green.
• ring-yellow-50: The ring color will be yellow.
• ring-pink-50: The ring color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100.

Syntax:

<button class="ring-{color}">...</button >

Example: 

Note: Currently the browsers are not supported by Tailwind CSS Ring Color, so for the output, I share the link of the output (Tailwind CSS Playground)

Output: