ContextQMD
Back to Tailwindcss

Outline Style

src/docs/outline-style.mdx

latest5.4 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "outline-style"; export const description = "Utilities for controlling the style of an element's outline.";

<ApiTable rows={[ ["outline-solid", "outline-style: solid;"], ["outline-dashed", "outline-style: dashed;"], ["outline-dotted", "outline-style: dotted;"], ["outline-double", "outline-style: double;"], ["outline-none", "outline-style: none;"], ["outline-hidden", "outline: 2px solid transparent;\noutline-offset: 2px;"], ]} />

Examples

Basic example

Use utilities like outline-solid and outline-dashed to set the style of an element's outline:

<Figure> <Example> { <div className="grid grid-cols-2 gap-x-4 gap-y-8 text-center text-sm font-semibold text-white"> <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-solid</p> <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-solid 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-dashed </p> <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dashed 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-dotted </p> <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dotted dark:border-transparent dark:bg-gray-700 dark:text-gray-200"> Button C </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-double </p> <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-3 outline-offset-2 outline-indigo-500 outline-double dark:border-transparent dark:bg-gray-700 dark:text-gray-200"> Button D </button> </div> </div> } </Example>
html
<!-- [!code classes:outline-solid,outline-dashed,outline-dotted,outline-double] -->
<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button>
<button class="outline-3 outline-offset-2 outline-double ...">Button D</button>
</Figure>

Hiding an outline

Use the outline-hidden utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:

<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the behavior"> <Example> { <input type="text" placeholder="Your full name" className="mx-auto block w-full max-w-xs border-b-2 border-gray-300 bg-gray-50 px-2 py-2 text-sm text-gray-800 focus:border-indigo-600 focus:outline-hidden dark:border-white/15 dark:bg-white/5 dark:text-white dark:focus:border-indigo-500" /> } </Example>
html
<!-- [!code classes:focus:outline-hidden] -->
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />
</Figure>

It is highly recommended to apply your own focus styling for accessibility when using this utility.

Removing outlines

Use the outline-none utility to completely remove the default browser outline on focused elements:

<Figure> <Example> { <div className="mx-auto flex max-w-md flex-col rounded-lg outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-indigo-600 dark:bg-white/5 dark:outline-transparent dark:focus-within:outline-indigo-500"> <textarea className="w-full resize-none p-2 outline-none" placeholder="Leave a comment..." /> <button className="mr-2 mb-2 inline-flex items-center self-end rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600" type="button" > Post </button> </div> } </Example>
html
<!-- [!code classes:outline-none] -->
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">
  <textarea class="outline-none ..." placeholder="Leave a comment..." />
  <button class="..." type="button">Post</button>
</div>
</Figure>

It is highly recommended to apply your own focus styling for accessibility when using this utility.

Responsive design

<ResponsiveDesign property="outline-style" defaultClass="outline" featuredClass="outline-dashed" />