Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Ring Offset Width

  • Last Updated : 02 Mar, 2021

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
    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 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :