Tailwind CSS Ring Width

Tailwind CSS provides ring width utility classes to control the thickness of an outline-like ring around an element. These utilities use CSS box shadows to create rings and can be applied to buttons, inputs, and other HTML elements.

1. Ring Width Utilities

ring-0: It removes the ring.
ring: Applies a 1px ring by default in Tailwind CSS v4.
ring-1: Applies a 1px ring.
ring-2: Applies a 2px ring.
ring-4: Applies a 4px ring.
ring-8: Applies an 8px ring.
ring-inset: Positions the ring inside the element instead of outside it.

You can also use custom values with ring-[<value>] to specify a ring width.

Note: In Tailwind CSS v4, the default ring utility uses the element's current text color and creates a 1px ring. Use a color utility such as ring-green-600 to set a specific ring color.

Syntax:

<button class="ring-{width} ring-{color}">Button</button>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Ring Width</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-8 text-center">
    <h1 class="text-3xl font-bold text-green-600">
        Tailwind CSS Ring Width
    </h1>

    <div class="mx-auto mt-8 grid max-w-2xl grid-cols-2 gap-6 p-4 sm:grid-cols-3">
        <button class="rounded-lg bg-green-100 p-4 ring-0 ring-green-600">
            Ring 0
        </button>
        <button class="rounded-lg bg-green-100 p-4 ring-1 ring-green-600">
            Ring 1
        </button>
        <button class="rounded-lg bg-green-100 p-4 ring-2 ring-green-600">
            Ring 2
        </button>
        <button class="rounded-lg bg-green-100 p-4 ring-4 ring-green-600">
            Ring 4
        </button>
        <button class="rounded-lg bg-green-100 p-4 ring-8 ring-green-600">
            Ring 8
        </button>
        <button class="rounded-lg bg-green-100 p-4 ring-[6px] ring-green-600">
            Ring 6px
        </button>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

2. Tailwind CSS Ring Inset

The ring-inset utility places a ring inside an element rather than outside it. This is useful when you want the ring to remain within an element's boundaries.

Syntax:

<button class="ring-4 ring-inset ring-{color}">Button</button>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Ring Inset</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-8 text-center">
    <h1 class="text-3xl font-bold text-green-600">
        Tailwind CSS Ring Inset
    </h1>

    <div class="mx-auto mt-8 flex max-w-lg flex-col gap-8 sm:flex-row">
        <button class="flex-1 rounded-lg bg-green-100 p-6 ring-4 ring-green-600">
            Outer Ring
        </button>
        <button class="flex-1 rounded-lg bg-green-100 p-6 ring-4 ring-inset ring-green-600">
            Inset Ring
        </button>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

1. Ring Width Utilities

2. Tailwind CSS Ring Inset

Explore