Outline Color

Basic usage

Setting the outline color

Use the outline-{color} utilities to change the color of an element's outline.

<button className="outline outline-offset-2 **outline-blue-500** ...">Button A</button>
<button className="outline outline-offset-2 **outline-cyan-500** ...">Button B</button>
<button className="outline outline-offset-2 **outline-pink-500** ...">Button C</button>

Changing the opacity

Control the opacity of an element's outline color using the color opacity modifier.

<button className="outline-2 outline-blue-500**/50** ...">Save Changes</button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<button className="outline-4 outline-pink-400**/[.55]** ..."></button>