Tailwind CSS Outline Width

In Tailwind CSS, you can use the outline-{width} utility class to set the width of an element's outline.

Syntax

{property}{:}{value};

The outline-{width} utility class has the following syntax:

outline-{width}

Where {width} can be one of the following values:

• 0: Removes the outline from the element.
• 1: Sets the width of the outline to 1px.
• 2: Sets the width of the outline to 2px.
• 4: Sets the width of the outline to 4px.
• 8: Sets the width of the outline to 8px.
• none: Removes the outline from the element.

Example

The following example shows how to use the outline-{width} utility class to set the width of an element's outline:

<button class="p-3 bg-blue-500 text-white rounded-md outline-2">Click me</button>

Output

The above example will generate the following CSS:

.outline-2 {
  outline-width: 2px;
}

Explanation

The outline-width property is used to set the width of an element's outline. The outline-{width} utility class abstracts this property and allows you to set the width of the outline using predefined values.

Use

You can use the outline-{width} utility class to set the width of the outline of any element that is a focusable element. This includes elements like buttons, links, and form fields.

This utility class is useful in situations where you want to highlight an element that has focus or when you want to add a decorative outline to an element.

Important Points

• The outline-{width} utility class only sets the width of the outline of an element. To set the color or style of the outline, you will need to use the outline-color and outline-style properties, respectively.
• The outline-width property does not affect the size or position of an element. If you want to increase the size of an element, you will need to use the width or height property, respectively.
• You can use the outline-none utility class to completely remove the outline from an element.

Summary

• Use the outline-{width} utility class to set the width of an element's outline.
• The predefined values for {width} are 0, 1, 2, 4, 8, and none.
• This utility class is useful for highlighting elements that have focus or for adding decorative outlines to elements.
• Use the outline-color and outline-style properties to set the color and style of an element's outline, respectively.