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-` utilities like `decoration-2` and `decoration-4` to change the [text decoration](/docs/text-decoration-line) 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.

} ```html

The quick brown fox...

``` ### Using a custom value ### Responsive design