This class accepts more than one value in tailwind CSS. All the properties are covered in class form. This class is used to set the ring-offset width of buttons.
Ring Offset Width classes:
- ring-offset-0: This class is used to deny the ring-offset.
- ring-offset-1: This class is used to set the smallest ring-offset.
- ring-offset-2: This class is used to set the medium ring-offset.
- ring-offset-4: This class is used to set the large ring-offset.
- ring-offset-8: This class is used to set the largest ring-offset.
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)
Syntax:
<button class="ring-offset-{width}">...</button >Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Ring Offset Width 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>
|
Output:
ring-offset width