Text Decoration Style

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 = "text-decoration-style"; export const description = "Utilities for controlling the style of text decorations.";

<ApiTable rows={[ ["decoration-solid", "text-decoration-style: solid;"], ["decoration-double", "text-decoration-style: double;"], ["decoration-dotted", "text-decoration-style: dotted;"], ["decoration-dashed", "text-decoration-style: dashed;"], ["decoration-wavy", "text-decoration-style: wavy;"], ]} />

Examples

Basic example

Use utilities like decoration-dotted and decoration-dashed to change the text decoration style of an element:

<Figure> <Example> { <div className="flex flex-col gap-8 text-gray-900 dark:text-gray-200"> <div> <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-solid</div> <p className="text-lg font-medium underline decoration-solid">The quick brown fox jumps over the lazy dog.</p> </div> <div> <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-double</div> <p className="text-lg font-medium underline decoration-double" children="The quick brown fox jumps over the lazy dog." /> </div> <div> <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-dotted</div> <p className="text-lg font-medium underline decoration-dotted">The quick brown fox jumps over the lazy dog.</p> </div> <div> <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-dashed</div> <p className="text-lg font-medium underline decoration-dashed">The quick brown fox jumps over the lazy dog.</p> </div> <div> <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-wavy</div> <p className="text-lg font-medium underline decoration-wavy">The quick brown fox jumps over the lazy dog.</p> </div> </div> } </Example> </Figure>

Responsive design

<ResponsiveDesign element="p" property="text-decoration-style" defaultClass="underline" featuredClass="decoration-dashed" />