Text Decoration Thickness - Tailwindcss

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

export const title = "text-decoration-thickness"; export const description = "Utilities for controlling the thickness of text decorations.";

<ApiTable rows={[ ["decoration-<number>", "text-decoration-thickness: <number>px;"], ["decoration-from-font", "text-decoration-thickness: from-font;"], ["decoration-auto", "text-decoration-thickness: auto;"], ["decoration-(length:<custom-property>)", "text-decoration-thickness: var(<custom-property>);"], ["decoration-[<value>]", "text-decoration-thickness: <value>;"], ]} />

Examples

Basic example

Use decoration-<number> utilities like decoration-2 and decoration-4 to change the text decoration thickness 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-1</div> <p className="text-lg font-medium underline decoration-1">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-2</div> <p className="text-lg font-medium underline decoration-2">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-4</div> <p className="text-lg font-medium underline decoration-4">The quick brown fox jumps over the lazy dog.</p> </div> </div> } </Example>

html

<!-- [!code classes:decoration-1] -->
<p class="underline decoration-1">The quick brown fox...</p>
<!-- [!code classes:decoration-2] -->
<p class="underline decoration-2">The quick brown fox...</p>
<!-- [!code classes:decoration-4] -->
<p class="underline decoration-4">The quick brown fox...</p>

</Figure>

Using a custom value

Responsive design