Skip to content
Related Articles

Related Articles

Tailwind CSS Ring Offset Width

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
View Discussion
Improve Article
Save Article

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 :

Start Your Coding Journey Now!