Text Decoration Line - Tailwindcss

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

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

Examples

Underling text

Use the underline utility to add an underline to the text of an element:

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 underline dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

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

</Figure>

Adding an overline to text

Use the overline utility to add an overline to the text of an element:

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 overline dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

<!-- [!code classes:overline] -->
<p class="overline">The quick brown fox...</p>

</Figure>

Adding a line through text

Use the line-through utility to add a line through the text of an element:

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 line-through dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

<!-- [!code classes:line-through] -->
<p class="line-through">The quick brown fox...</p>

</Figure>

Removing a line from text

Use the no-underline utility to remove a line from the text of an element:

<Figure> <Example> { <p className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200"> The quick brown fox jumps over the lazy dog. </p> } </Example>

html

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

</Figure>

Applying on hover

<TargetingSpecificStates property="text-decoration-line"> <Figure hint="Hover over the text to see the expected behavior"> <Example> { <div className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200"> The{" "} <a href="https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog" target="blank" className="text-sky-600 no-underline hover:underline dark:text-sky-400" > quick brown fox </a>{" "} jumps over the lazy dog. </div> } </Example>

html

<!-- [!code classes:hover:underline] -->
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

</Figure> </TargetingSpecificStates>

Responsive design