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:
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Ring Offset Color Class</b>
<div class="mx-16 grid grid-cols-2 gap-6 p-2">
<button class="ring-4 ring-green-600 ring-offset-4
ring-offset-green-700 bg-green-400
ring-opacity-25 w-full h-12 rounded-lg">
ring-offset-4 ring-offset-green-700
</button>
<button class="ring-4 ring-green-600 bg-green-400
ring-offset-4 ring-offset-yellow-700
ring-opacity-25 w-full h-12 rounded-lg">
ring-offset-4 ring-offset-yellow-700
</button>
</div>
</body>
</html>
|
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)
ring-offset