Tailwind CSS - Outline Style

Previous
Quiz
Next

Tailwind CSS Outline Styles are predefined classes that allow you to easily set different styles for the element outlines, including solid, dashed, or dotted lines.

Tailwind CSS Outline Style Classes

Below is a list of Tailwind CSS Outline Style classes that control the appearance of element outlines.

Class CSS Properties
outline-none outline: 2px solid transparent;
outline-offset: 2px;
outline outline-style: solid;
outline-dashed outline-style: dashed;
outline-dotted outline-style: dotted;
outline-double outline-style: double;

Functionality of Tailwind CSS Outline Style Classes

  • outline-none: Removes the outline from the element.
  • outline: Adds a solid outline around the element.
  • outline-dashed: Adds a dashed outline around the element.
  • outline-dotted: Adds a dotted outline around the element.
  • outline-double: Adds a double-line outline around the element.

Tailwind CSS Outline Style Class Examples

Below are examples of Tailwind CSS Outline Style classes showing different outline styles like solid, dashed, and dotted for elements.

Applying Outline Styles

This example shows how to use Tailwind CSS outline style classes to apply different styles to the outlines around HTML elements. Each class shows a different style, such as solid, dashed, or dotted outlines.

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 Styles
    </h2>
    <div class="grid grid-cols-3 gap-6">
         <p class="outline-none outline-4 
            outline-purple-400 border border-black p-4">
            None outline
        </p>
        <p class="outline-solid outline-4 outline-offset-2 
            outline-rose-500 border border-black p-2">
            Solid outline
        </p>
        <p class="outline-dashed outline-4 outline-offset-2 
            outline-red-700 border border-black p-1">
            Dashed outline 
        </p>
        <p class="outline-dotted outline-4 outline-offset-2 
            outline-pink-800 border border-black p-4 ">
            Dotted outline  
        </p>
        <p class="border border-black outline-double 
            outline-4 outline-offset-2 outline-cyan-500 p-4">
            Double outline
        </p>
    </div>
</body>

</html>

Different Outline Styles on Hover

This example shows how to use Tailwind CSS Outline style classes to dynamically change the outline style of elements on hover.

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 Styles
    </h2>
    <p class="underline mb-4">
        Hover over the boxes to see how 
        the outline styles change.
    </p> 
    <div class="outline outline-solid outline-offset-2 p-4 border 
        border-black mb-4 hover:outline-dashed hover:outline-red-600">
        Solid Outline - Hover: Dashed Red
    </div> 
    <div class="outline outline-dotted p-4 border border-black mb-4 
        hover:outline-double hover:outline-blue-700">
        Dotted Outline - Hover: Double Blue
    </div> 
    <div class="outline outline-double outline-offset-2 p-4 border 
        border-black hover:outline-none">
        Double Outline - Hover: No Outline
    </div>
</body>

</html>
Print Page
Previous
Next