Add new outline style, color, width and offset utilities

[reinink]

This PR replaces the existing outline utilities with new outline-style, outline-color, outline-width and outline-offset utilities. This approach is more inline with how the existing ring and border utilities work.

outline-style

The outline-style utilities both enable (or disable) the outline styles, and also determine what type of outline should be drawn. Note that for now this only includes the same values as are available for border styles.

<div class="outline">
  <!-- A black 3px outline will be added -->
</div>

<div class="outline-dotted">
  <!-- A dotted 3px outline will be added -->
</div>

The outline class here is a shorthand for outline-solid, since it's the most common style to use.

Note also that when you don't specify an outline width or color, you'll just get the browser defaults, which is a black outline that's 3px wide.

Class	CSS
.outline	outline-style: solid
.outline-dashed	outline-style: dashed
.outline-dotted	outline-style: dotted
.outline-double	outline-style: double
.outline-hidden	outline-style: hidden
.outline-none	outline-style: none

outline-color

The outline-color utilities set the color for the outline. The color values are taken from the outlineColor key in the Tailwind config, which extends the default color palette by default.

The outline color utilities support both the alpha shorthand, such as outline-red-600/50, as well as arbitrary values, such as outline-[#FF0000].

If an outline color is not set it falls back to the browser default, which is black.

<div class="outline outline-red-600">
  <!-- A red 3px outline will be added -->
</div>

Class	CSS
.outline-inherit	outline-color: inherit
.outline-current	outline-color: currentColor
.outline-transparent	outline-color: transparent
.outline-black	outline-color: #000
.outline-white	outline-color: #fff
.outline-slate-100	outline-color: #f1f5f9
.outline-slate-200	outline-color: #e2e8f0
.outline-slate-300	outline-color: #cbd5e1

outline-width

The outline-width utilities set the width of the outline. The width values are taken from the outlineWidth key in the Tailwind config.

The outline width utilities also support arbitrary values, such as outline-[10px].

If an outline width is not set it falls back to the browser default, which is 3px.

<div class="outline outline-8">
  <!-- A black 8px outline will be added -->
</div>

Class	CSS
.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

outline-offset

The outline-offset utilities set the offset of the outline (the distance from the element). The offset values are taken from the outlineOffset key in the Tailwind config.

The outline offset utilities also support arbitrary values, such as outline-offset-[10px].

<div class="outline outline-offset-8">
  <!-- A black 3px outline that's offset 8px will be added -->
</div>

Class	CSS
.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

Breaking changes

These new outline utilities replace the previous versions, which were based on the outline shorthand property. If you haven't customized these values or used any arbitrary values, no changes are required, as the default utilities (outline-none, outline-white and outline-black) all still exist in this update.

That said, please be aware that the outline-white and outline-black styles have changed slightly — they are no longer dotted (but now solid), and they are also no longer offset by 2px.

  .outline-black {
+    outline-color: #000;
-    outline: 2px dotted black;
-    outline-offset: 2px;
  }

  .outline-white {
+    outline-color: #fff;
-    outline: 2px dotted white;
-    outline-offset: 2px;
  }