Tailwind CSS - Outline Width

Previous
Quiz
Next

Tailwind CSS Outline Width provides predefined classes to adjust the thickness of outlines around elements, making it easy to set the thickness on all sides.

Tailwind CSS Outline Width Classes

Below is a list of Tailwind CSS Outline Width classes and properties that you can use to set the outline thickness.

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

Functionality Of Tailwind CSS Outline Width Classes

  • outline-0: Removes the outline completely.
  • outline-1: Sets the outline to 1 pixel.
  • outline-2: Sets the outline to 2 pixels.
  • outline-4: Sets the outline to 4 pixels.
  • outline-8: Sets the outline to 8 pixels.

Tailwind CSS Outline Width Class Examples

Below are examples of Tailwind CSS Outline Width classes that show how to easily adjust the thickness of outlines around your elements.

Setting Outline Width

This example shows how to use Tailwind CSS classes to apply different outline widths. The outline is applied outside the border, and its width can be adjusted using the outline-* 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 Outline Width
    </h2>
    <div class="space-y-4">
        <p class="border border-black outline-offset-2 outline-0 p-4">
            Black border with no outline.
        </p> 
        <p class="border border-black outline outline-offset-2 
            outline-2 outline-green-500 p-4">
            Black border with a 2px green outline.
        </p>
        <p class="border border-black outline outline-offset-2 
            outline-4 outline-blue-500 p-4">
            Black border with a 4px yellow outline.
        </p>
        <p class="border border-black outline outline-offset-2 
            outline-8 outline-red-500 p-4">
            Black border with an 8px red outline.
        </p>
    </div>
</body>

</html>

Outline Widths with Color Changes on Hover

This example displays containers with different outline widths and colors. By default, each container has a specific outline color and width. When you hover over them, the outline color darkens, providing a visual highlight effect.

Example

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

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Outline Width
    </h2>
    <h3 class="text-xl font-semibold mb-4">
        Applying hover effects to outline widths:
    </h3>
    <div class="space-y-6">
        <p class="border-2 border-black outline outline-2 outline-offset-2 
            outline-red-600 p-4 hover:outline-blue-700 hover:outline-4">
            Default: 2px red outline; On hover: 4px blue outline.
        </p> 
        <p class="border-2 border-black outline outline-1 outline-offset-2 
            p-4 outline-green-500 hover:outline-cyan-500 hover:outline-8">
            Default: 1px  green  outline; On hover: 8px cyan outline.
        </p>  
    </div>
</body>

</html>
Print Page
Previous
Next