Tailwind CSS Ring Width

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.9.6/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-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.9.6/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>

Explore