Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

text-decoration-color

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx";

Clase Propiedades CSS
decoration-inherit text-decoration-color: inherit;
decoration-current text-decoration-color: currentColor;
decoration-transparent text-decoration-color: transparent;
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:

{

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} My Company, Inc . Outside of work, I like to{" "} watch pod-racing {" "} and have{" "} light-saber {" "} fights.

}

<!-- [!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>

Changing the opacity#

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

{

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} My Company, Inc . Outside of work, I like to{" "} watch pod-racing {" "} and have{" "} light-saber {" "} fights.

}

<!-- [!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>

Using a custom value#

Applying on hover#

{

The{" "} quick brown fox {" "} jumps over the lazy dog.
}

<!-- [!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>

Responsive design#

Customizing your theme#