Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Ring Width

Quiz

Tailwind CSS Ring Width provides predefined classes for controlling the thickness of the ring around an element. A ring is a visual boundary that appears outside an element's border.

Tailwind CSS Ring Width Classes

Below is a list of Tailwind CSS Ring Width classes and their properties. These classes help you set different thicknesses for the ring around an element.

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

Functionality Of Tailwind CSS Ring Width Classes

ring-0: No ring is visible around the element.
ring-1: Applies a ring with a width of 1 pixel.
ring-2: Applies a ring with a width of 2 pixels.
ring: Applies a ring with a width of 3 pixels (default size).
ring-4: Applies a ring with a width of 4 pixels.
ring-8: Applies a ring with a width of 8 pixels.
ring-inset: Applies an inset ring, making the ring appear inside the element's border.

Tailwind CSS Ring Width Class Examples

Below are examples of Tailwind CSS Ring Width classes that show how to easily adjust the thickness of the ring around an element. By applying different classes, you can change the width of the ring to make it stand out more or less, depending on your design needs.

Setting Different Ring Width

This example shows different ring widths using Tailwind CSS Ring Width classes. The following code sets different thicknesses, ranging from no ring to up to 3 pixels. You can use the ring-* classes to adjust the ring's width as needed.

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 Width
    </h2> 
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-0 border border-black 
                p-4 rounded-md">
            <strong>ring-0:</strong> No ring visible.
        </p>
        <p class="ring-1 border border-black 
                p-4 rounded-md">
            <strong>ring-1:</strong> 1-pixel ring.
        </p>
        <p class="ring-2 border border-black 
                p-4 rounded-md">
            <strong>ring-2:</strong> 2-pixel ring.
        </p>
        <p class="ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring:</strong> 4-pixel ring.
        </p>
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-*</strong> classes to set 
        different ring widths.
    </p>
</body>

</html>

Adjusting Ring Width and Inset

This example shows how to use Tailwind CSS to modify the ring width and inset for elements. The default ring class adds a 3-pixel ring around the element, while the ring-inset class moves the ring inside the border. Use these classes to control the thickness and positioning of the ring for different design effects.

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 Width
    </h2> 
    <h3 class="underline font-bold mb-4">
        Applying the Ring Inset Property:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring border border-black p-4 rounded-md">
            <strong>Ring:</strong> By default 3px
        </p> 
        <p class="ring-inset ring-4 border
                border-black p-4 rounded-md">
            <strong>Ring Inset:</strong> Inserts 
            ring inside the border.
        </p> 
    </div>
</body>

</html>

Visual Ring Changes with Hover States

This example shows how to use Tailwind CSS Ring Width classes to adjust the width and appearance of rings around elements when you hover over them.

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 Width 
    </h2>
    <h3 class="font-bold underline mb-4">
        Hover to adjust ring width:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-4 border border-black p-4 
            rounded-md hover:ring-inset">
            <strong>Ring:</strong> Inset on hover.
        </p>
        <p class="ring-4 ring-inset border border-black p-4
            rounded-md hover:ring-8">
            <strong>Ring-4:</strong> Expand on hover.
        </p>
    </div>
    <div class="flex justify-center mt-6">
        <p class="ring-0 border border-black p-4 
            rounded-md hover:ring-8 hover:ring-purple-500">
            <strong>Ring-0:</strong> Purple 8px on hover.
        </p>
    </div>
</body>

</html>

Print Page