Text Decoration Color - Tailwindcss

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

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

<ApiTable rows={[ ["decoration-inherit", "text-decoration-color: inherit;"], ["decoration-current", "text-decoration-color: currentColor;"], ["decoration-transparent", "text-decoration-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ decoration-${name}, text-decoration-color: var(--color-${name}); /* ${value} */, ]), ["decoration-(<custom-property>)", "text-decoration-color: var(<custom-property>);"], ["decoration-[<value>]", "text-decoration-color: <value>;"], ]} />

Examples

Basic example

Use utilities like decoration-sky-500 and decoration-pink-500 to change the text decoration color of an element:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-sm gap-4 p-8 text-sm/6 text-gray-900 dark:text-gray-200"> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} <a href="#" className="font-bold underline decoration-sky-500 decoration-2 dark:text-gray-200"> My Company, Inc </a> . Outside of work, I like to{" "} <a href="#" className="font-bold underline decoration-pink-500 decoration-2 dark:text-gray-200"> watch pod-racing </a>{" "} and have{" "} <a href="#" className="font-bold underline decoration-indigo-500 decoration-2 dark:text-gray-200"> light-saber </a>{" "} fights. </p> } </Example>

html

<!-- [!code classes:decoration-sky-500,decoration-pink-500,decoration-indigo-500] -->
<!-- prettier-ignore -->
<p>
  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
  at <a class="underline decoration-sky-500">My Company, Inc</a>. Outside
  of work, I like to <a class="underline decoration-pink-500">watch pod-racing</a>
  and have <a class="underline decoration-indigo-500">light-saber</a> fights.
</p>

</Figure>

Changing the opacity

Use the color opacity modifier to control the text decoration color opacity of an element:

<Figure> <Example padding={false}> { <p className="mx-auto max-w-sm gap-4 p-8 text-sm/6 text-gray-900 dark:text-gray-200"> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} <a href="#" className="font-bold underline decoration-sky-500/30 decoration-2 dark:text-gray-200"> My Company, Inc </a> . Outside of work, I like to{" "} <a href="#" className="font-bold underline decoration-pink-500/30 decoration-2 dark:text-gray-200"> watch pod-racing </a>{" "} and have{" "} <a href="#" className="font-bold underline decoration-indigo-500/30 decoration-2 dark:text-gray-200"> light-saber </a>{" "} fights. </p> } </Example>

html

<!-- [!code word:\/30] -->
<!-- prettier-ignore -->
<p>
  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
  at <a class="underline decoration-sky-500/30">My Company, Inc</a>. Outside
  of work, I like to <a class="underline decoration-pink-500/30">watch pod-racing</a>
  and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
</p>

</Figure>

Using a custom value

Applying on hover

<TargetingSpecificStates property="text-decoration-color"> <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="underline hover:decoration-pink-500" > quick brown fox </a>{" "} jumps over the lazy dog. </div> } </Example>

html

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

</Figure> </TargetingSpecificStates>

Responsive design

Customizing your theme