Tailwind CSS - Ring Offset Width

Previous
Quiz
Next

Tailwind CSS Ring Offset Width provides predefined classes to control the space between an element's border and its ring. This allows you to adjust how far the ring is offset from the element's edge.

Tailwind CSS Ring Offset Width Classes

Below is a list of Tailwind CSS Ring Offset Width classes and properties that set different spacing between the ring and the element.

Class CSS Properties
ring-offset-0 --tw-ring-offset-width: 0px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1 --tw-ring-offset-width: 1px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2 --tw-ring-offset-width: 2px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4 --tw-ring-offset-width: 4px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8 --tw-ring-offset-width: 8px;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Functionality Of Tailwind CSS Ring Offset Width Classes

  • ring-offset-0: No extra space between the ring and the element's edge.
  • ring-offset-1: Adds a 1-pixel space between the ring and the element's border.
  • ring-offset-2: Adds a 2-pixel space between the ring and the element's border.
  • ring-offset-4: Adds a 4-pixel space between the ring and the element's border.
  • ring-offset-8: Adds an 8-pixel space between the ring and the element's border.

Tailwind CSS Ring Offset Width Class Examples

Below are examples of Tailwind CSS Ring Offset Width classes that show how to adjust the space between an element's border and its ring. These classes let you control how far the ring is positioned away from the element.

Setting Ring Offset Width

This example shows how to use Tailwind CSS classes to apply different ring-offset widths. The ring-offset is applied outside the border, and its width can be adjusted using the ring-offset-* classes. It does not affect the layout or the space occupied by the element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-0 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-0</strong>
        </p>
        <p class="ring-offset-1 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-1</strong>
        </p>
        <p class="ring-offset-4 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
         <p class="ring-offset-8 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-8</strong>
        </p> 
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-offset-*</strong> classes to adjust 
        the ring offset width.
    </p>
</body>

</html>

Applies Offset Width Using ring-offset

This example shows the use of Tailwind CSS's Ring Offset Width classes to adjust the space between an element's border and its ring. The ring-inset class positions the ring inside the border and sets the ring offset, which displays the ring within the element's border.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-5">
       Applies offset width using the ring-offset classes:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-2 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-2</strong>
        </p>
        <p class="ring-offset-4 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
    </div>
    <div class="flex justify-center mt-4">
     <p class="ring-offset-8 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>Applies ring-offset-8</strong>
        </p> 
    </div>
</body>

</html>

Hover-Based Ring Offset Adjustments

This example shows how to use Tailwind CSS to change the ring offset width when you hover over elements. Initially, each container has a default ring width and color. On hovering, the ring offset changes to create a visual effect, like moving the ring inward or outward.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-4">
        Hover to adjust ring offset width:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="hover:ring-offset-2 hover:ring border 
            ring-teal-600 border-black p-4 rounded-md">
        <strong>2px Offset on Hover</strong>
        </p>
        <p class="hover:ring-offset-4 hover:ring border 
                    ring-teal-600 border-black p-4 rounded-md">
            <strong>4px Offset on Hover</strong>
        </p>
    </div>
    <div class="flex justify-center mt-6">
        <p class="ring ring-offset-8 ring-red-600 hover:ring-inset 
            hover:ring-offset-8  border border-black p-4
            rounded-md hover:ring-purple-500">
            <strong>8px offset, inset on hove</strong> 
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next