Outline color
import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors";
export const title = "outline-color"; export const description = "Utilities for controlling the color of an element's outline.";
outline-${name},
outline-color: var(--color-${name}); /* ${value} */,
]),
["outline-(
Examples¶
Basic example¶
Use utilities like outline-rose-500 and outline-lime-100 to control the color of an element's outline:
outline-blue-500
outline-cyan-500
outline-pink-500
<!-- [!code classes:outline-blue-500,outline-cyan-500,outline-pink-500] -->
<button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>
Changing the opacity¶
Use the color opacity modifier to control the opacity of an element's outline color:
outline-blue-500/100
outline-blue-500/75
outline-blue-500/50
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<button class="outline-2 outline-blue-500/100 ...">Button A</button>
<button class="outline-2 outline-blue-500/75 ...">Button B</button>
<button class="outline-2 outline-blue-500/50 ...">Button C</button>