Tailwind CSS Ring Offset Width
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
Please Login to comment...