Tailwind CSS Outline

Tailwind CSS provides utility classes to control an element's outline, including its width, style, color, and offset. An outline is a line drawn around an element that does not occupy space in the document layout.

These utilities are useful for styling focused form fields, buttons, and other interactive elements. They correspond to the CSS outline property and its related properties.

Class	Description
`outline-none`	Removes the outline by setting `outline-style: none`.
`outline-hidden`	Hides the outline while preserving it for forced-colors accessibility modes.
`outline`	Sets the outline width to 1px.
`outline-2`	Sets the outline width to 2px.
`outline-4`	Sets the outline width to 4px.
`outline-solid`	Sets a solid outline style.
`outline-dashed`	Sets a dashed outline style.
`outline-dotted`	Sets a dotted outline style.
`outline-double`	Sets a double-line outline style.
`outline-white`	Sets the outline color to white.
`outline-black`	Sets the outline color to black.
`outline-offset-2`	Adds a 2px gap between the element and its outline.

You can also use color utilities such as outline-green-500 and outline-blue-500 to set different outline colors.

Syntax:

<element class="outline-2 outline-solid outline-green-500">
  ...
</element>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Outline Classes</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-8">
    <div class="mx-auto max-w-lg rounded-xl bg-white p-6 shadow-lg">
        <h1 class="mb-2 text-2xl font-bold text-green-700">
            Tailwind CSS Outline Classes
        </h1>
        <p class="mb-6 text-gray-600">
            Click or tab through the fields to see the outline effects.
        </p>
        <div class="space-y-5">
            <div>
                <label class="mb-2 block font-medium">
                    Solid green outline
                </label>
                <input
                    type="text"
                    placeholder="Focus on this field"
                    class="w-full rounded-md border border-gray-300 p-3
                           outline-2 outline-solid outline-green-500
                           outline-offset-2 focus:outline-green-700"
                >
            </div>

            <div>
                <label class="mb-2 block font-medium">
                    Dashed blue outline
                </label>
                <input
                    type="text"
                    placeholder="Focus on this field"
                    class="w-full rounded-md border border-gray-300 p-3
                           outline-2 outline-dashed outline-blue-500
                           outline-offset-2"
                >
            </div>

            <div>
                <label class="mb-2 block font-medium">
                    Dotted red outline
                </label>
                <input
                    type="text"
                    placeholder="Focus on this field"
                    class="w-full rounded-md border border-gray-300 p-3
                           outline-2 outline-dotted outline-red-500
                           outline-offset-2"
                >
            </div>

            <div>
                <label class="mb-2 block font-medium">
                    Double purple outline
                </label>
                <input
                    type="text"
                    placeholder="Focus on this field"
                    class="w-full rounded-md border border-gray-300 p-3
                           outline-4 outline-double outline-purple-500
                           outline-offset-2"
                >
            </div>

            <div>
                <label class="mb-2 block font-medium">
                    No outline
                </label>
                <input
                    type="text"
                    placeholder="No outline when focused"
                    class="w-full rounded-md border border-gray-300 p-3
                           focus:outline-none"
                >
            </div>
        </div>
    </div>
</body>
</html>

Output: The page displays five input fields with different outline styles. The first four demonstrate solid, dashed, dotted, and double outlines in different colors. The last input removes its outline when focused.

Explore