Open In App

Tailwind CSS Ring Width

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form.  This class is used to set the ring width of buttons.

Ring Width Classes:

  • * : This class is used to set the box-shadow 0 0 #000
  • ring: This class is used to set the ring.
  • ring-0: This class defines no ring
  • ring-1: Thinnest link to be created by using this class.
  • ring-2: This class is used to create the medium ring around the button.
  • ring-4: This class is used to create the large ring around the button.
  • ring-8: This class is used to create the widest ring around the button.
  • ring-inset: This class is used to generate ring inside, like padding works on any element.

ring: This class is used to apply solid box-shadow of a specific thickness to an element. These rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

Syntax:

<button class="ring-{number}">...</button >

Example:

HTML




<!DOCTYPE html> 
<html
<head
    <link href=
"https: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 Width Class</b
  
    <div class="mx-16 grid grid-cols-5 gap-2  p-2">
        <button class="ring-0 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-0
        </button>
        <button class="ring-1 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-1
        </button>
        <button class="ring-2 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-2
        </button>
        <button class="ring-4 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-4
        </button>
        <button class="ring-8 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-8
        </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 width

ring-inset: This class is used to generate ring inside, like padding works on any element.

Syntax:

<button class="ring-inset">...</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 Width Class</b
  
    <div class="mx-16 grid grid-cols-5 gap-2  p-2">
        <button class="ring-4 ring-green-600 bg-green-400 
                   ring-opacity-25 w-full h-12 rounded-lg">
            Ring-4
        </button>
        <button class="ring-4 ring-green-600 ring-inset 
            bg-green-400 ring-opacity-25 w-full h-12 rounded-lg">
            ring-inset    
        </button>
    </div>
</body
</html>


ring width



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads