src/docs/outline-color.mdx
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.";
<ApiTable
rows={[
["outline-inherit", "outline-color: inherit;"],
["outline-current", "outline-color: currentColor;"],
["outline-transparent", "outline-color: transparent;"],
...Object.entries(colors).map(([name, value]) => [
outline-${name},
outline-color: var(--color-${name}); /* ${value} */,
]),
["outline-(<custom-property>)", "outline-color: var(<custom-property>);"],
["outline-[<value>]", "outline-color: <value>;"],
]}
/>
Use utilities like outline-rose-500 and outline-lime-100 to control the color of an element's outline:
<!-- [!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>
Use the color opacity modifier to control the opacity of an element's outline color:
<Figure> <Example> { <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> outline-blue-500/100 </p> <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/100 dark:border-transparent dark:bg-gray-700 dark:text-gray-200"> Button A </button> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> outline-blue-500/75 </p> <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/75 dark:border-transparent dark:bg-gray-700 dark:text-gray-200"> Button B </button> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> outline-blue-500/50 </p> <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/50 dark:border-transparent dark:bg-gray-700 dark:text-gray-200"> Button C </button> </div> </div> } </Example><!-- [!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>