Text decoration thickness

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.";

", "text-decoration-thickness: \px;"], ["decoration-from-font", "text-decoration-thickness: from-font;"], ["decoration-auto", "text-decoration-thickness: auto;"], ["decoration-(length:\)", "text-decoration-thickness: var(\);"], ["decoration-[\]", "text-decoration-thickness: \;"], ]} />

Examples

Basic example

Use decoration-<number> utilities like decoration-2 and decoration-4 to change the text decoration thickness of an element:

{

decoration-1

The quick brown fox jumps over the lazy dog.

decoration-2

The quick brown fox jumps over the lazy dog.

decoration-4

The quick brown fox jumps over the lazy dog.

}

<!-- [!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>

Using a custom value

Responsive design