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. In CSS, we do that by using the CSS Color property.
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:
HTML
<!DOCTYPE html> <html>
<head>
<link
rel="stylesheet">
</head>
<body class="text-center">
<div class="mx-16 grid grid-cols-5 gap-4 p-2">
<button class="ring-4 ring-red-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-green-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-blue-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-yellow-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
<button class="ring-4 ring-pink-600 bg-green-400
w-full h-12 rounded-lg">
Ring-4
</button>
</div>
</body>
</html>
|
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:
Tailwind Ring Color