Tailwind CSS - Outline Offset

Previous
Quiz
Next

Tailwind CSS Outline Offset is a collection of predefined classes that adjust the space or distance between an element's outline and its border.

Tailwind CSS Outline Offset Classes

Below is a list of Tailwind CSS Outline Offset classes with properties that set different distances for the outline from the element's border.

Class CSS Properties
outline-offset-0 outline-offset: 0px;
outline-offset-1 outline-offset: 1px;
outline-offset-2 outline-offset: 2px;
outline-offset-4 outline-offset: 4px;
outline-offset-8 outline-offset: 8px;

Functionality Of Tailwind CSS Outline Offset Classes

  • outline-offset-0: The outline is right at the edge of the element.
  • outline-offset-1: The outline is slightly away from the edge by 1 pixel.
  • outline-offset-2: The outline is 2 pixels away from the edge.
  • outline-offset-4: The outline is 4 pixels away from the edge.
  • outline-offset-8: The outline is 8 pixels away from the edge.

Tailwind CSS Outline Offset Class Examples

Below are examples of Tailwind CSS Outline Offset classes that show how to adjust the position of the outline relative to the element's border. These classes allow you to modify the distance between the outline and the element.

Applying Different Outline Offset

This example shows the use of Tailwind CSS Outline Offset classes to adjust the space between an element's outline and its border. By applying different classes, you can customize the outline's placement and create various visual 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 Outline Offset 
    </h2>
    <div class="space-y-6">
        <p class="outline outline-offset-auto outline-cyan-500 
            border border-black">
            Auto offset outline.
        </p> 
        <p class="outline outline-offset-0 outline-cyan-600
            border border-black">
            Offset 0: Cyan outline, black border.
        </p>
        <p class="outline outline-offset-2 outline-cyan-600
            border border-black">
            Offset 2: Cyan outline.
        </p> 
        <p class="outline outline-offset-8 outline-cyan-600
            border border-black">
            Offset 8: Cyan outline.
        </p>
        <p>Use <strong>outline-offset-*</strong>
            classes to set different offsets.
        </p>
    </div>
</body>

</html>

Changing Outline Offset on Hover

This example shows how to use Tailwind CSS Outline Offset classes to adjust the outline's position. Hover over each paragraph to see how different classes (auto, 0, 1, 2, 4, 8) affect the space between the outline and 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-4">
        Tailwind CSS Outline Offset
    </h2>
    <h3 class="underline font-bold mb-2">
        Hover to see different outline offset:
    </h3>
    <div class="space-y-6">
        <p class="outline outline-offset-1 outline-cyan-500 
            border border-black hover:outline-offset-4 
            hover:outline-green-500">
            Offset 1: Moves to 4px and turns green on hover.
        </p>  
        <p class="outline outline-offset-auto outline-cyan-600 
            border border-black hover:outline-offset-2 
            hover:outline-purple-600">
            Offset auto: Moves to 2px and turns purple on hover.
        </p> 
        <p class="outline outline-offset-8 outline-cyan-600
            border border-black hover:outline-offset-0 
            hover:outline-red-500">
            Offset 8: Moves to 0px and turns red on hover.
        </p> 
    </div>
</body>

</html>
Print Page
Previous
Next