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

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

```html
<!-- [!code classes:decoration-solid,decoration-double,decoration-dotted,decoration-dashed,decoration-wavy] -->
<p class="underline decoration-solid">The quick brown fox...</p>
<p class="underline decoration-double">The quick brown fox...</p>
<p class="underline decoration-dotted">The quick brown fox...</p>
<p class="underline decoration-dashed">The quick brown fox...</p>
<p class="underline decoration-wavy">The quick brown fox...</p>
```

</Figure>

### Responsive design

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