# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-thickness.mdx

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](/docs/text-decoration-line) 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

<UsingACustomValue
  element="p"
  utility="decoration"
  name="text decoration thickness"
  value="0.25rem"
  variable="decoration-thickness"
  dataType="length"
/>

### Responsive design

<ResponsiveDesign
  element="p"
  property="text-decoration-thickness"
  defaultClass="underline"
  featuredClass="decoration-4"
/>