Text Decoration Color

Controls the color of the text decoration.

Class	Style
`tdc-red-1`	`text-decoration-color: #f9e0e0;`
`tdc-red-2`	`text-decoration-color: #f3c5c5;`
`tdc-red-3`	`text-decoration-color: #edaaaa;`
`tdc-red-4`	`text-decoration-color: #e88e8e;`
`tdc-red-5`	`text-decoration-color: #e27373;`
`tdc-red-6`	`text-decoration-color: #dd5858;`
`tdc-red`	`text-decoration-color: #d73d3d;`
`tdc-red-7`	`text-decoration-color: #b93434;`
`tdc-red-8`	`text-decoration-color: #9b2c2c;`
`tdc-red-9`	`text-decoration-color: #7d2323;`
`tdc-red-10`	`text-decoration-color: #5f1b1b;`
`tdc-red-11`	`text-decoration-color: #411212;`
`tdc-red-12`	`text-decoration-color: #220a0a;`
`tdc-orange-1`	`text-decoration-color: #fae7d9;`
`tdc-orange-2`	`text-decoration-color: #f6d2b9;`
`tdc-orange-3`	`text-decoration-color: #f1bd98;`
`tdc-orange-4`	`text-decoration-color: #eda777;`
`tdc-orange-5`	`text-decoration-color: #e99256;`
`tdc-orange-6`	`text-decoration-color: #e47d35;`
`tdc-orange`	`text-decoration-color: #e06814;`
`tdc-orange-7`	`text-decoration-color: #c15911;`
`tdc-orange-8`	`text-decoration-color: #a14b0e;`
`tdc-orange-9`	`text-decoration-color: #823c0c;`
`tdc-orange-10`	`text-decoration-color: #632e09;`
`tdc-orange-11`	`text-decoration-color: #431f06;`
`tdc-orange-12`	`text-decoration-color: #241103;`
`tdc-yellow-1`	`text-decoration-color: #f8f0d7;`
`tdc-yellow-2`	`text-decoration-color: #f2e3b5;`
`tdc-yellow-3`	`text-decoration-color: #ecd692;`
`tdc-yellow-4`	`text-decoration-color: #e5c86f;`
`tdc-yellow-5`	`text-decoration-color: #dfbb4c;`
`tdc-yellow-6`	`text-decoration-color: #d9ae2a;`
`tdc-yellow`	`text-decoration-color: #d3a107;`
`tdc-yellow-7`	`text-decoration-color: #b58a06;`
`tdc-yellow-8`	`text-decoration-color: #987405;`
`tdc-yellow-9`	`text-decoration-color: #7a5d04;`
`tdc-yellow-10`	`text-decoration-color: #5d4703;`
`tdc-yellow-11`	`text-decoration-color: #3f3002;`
`tdc-yellow-12`	`text-decoration-color: #221a01;`
`tdc-green-1`	`text-decoration-color: #dbf3e4;`
`tdc-green-2`	`text-decoration-color: #bce8cc;`
`tdc-green-3`	`text-decoration-color: #9cddb4;`
`tdc-green-4`	`text-decoration-color: #7dd29c;`
`tdc-green-5`	`text-decoration-color: #5ec785;`
`tdc-green-6`	`text-decoration-color: #3ebc6d;`
`tdc-green`	`text-decoration-color: #1fb155;`
`tdc-green-7`	`text-decoration-color: #1b9849;`
`tdc-green-8`	`text-decoration-color: #167f3d;`
`tdc-green-9`	`text-decoration-color: #126731;`
`tdc-green-10`	`text-decoration-color: #0e4e25;`
`tdc-green-11`	`text-decoration-color: #09351a;`
`tdc-green-12`	`text-decoration-color: #051c0e;`
`tdc-teal-1`	`text-decoration-color: #d9f1ee;`
`tdc-teal-2`	`text-decoration-color: #b8e4df;`
`tdc-teal-3`	`text-decoration-color: #97d8d0;`
`tdc-teal-4`	`text-decoration-color: #76cbc2;`
`tdc-teal-5`	`text-decoration-color: #54bfb3;`
`tdc-teal-6`	`text-decoration-color: #33b2a4;`
`tdc-teal`	`text-decoration-color: #12a695;`
`tdc-teal-7`	`text-decoration-color: #0f8f80;`
`tdc-teal-8`	`text-decoration-color: #0d786b;`
`tdc-teal-9`	`text-decoration-color: #0a6056;`
`tdc-teal-10`	`text-decoration-color: #084942;`
`tdc-teal-11`	`text-decoration-color: #05322d;`
`tdc-teal-12`	`text-decoration-color: #031b18;`
`tdc-cyan-1`	`text-decoration-color: #d7f0f5;`
`tdc-cyan-2`	`text-decoration-color: #b4e4ec;`
`tdc-cyan-3`	`text-decoration-color: #91d7e3;`
`tdc-cyan-4`	`text-decoration-color: #6ecada;`
`tdc-cyan-5`	`text-decoration-color: #4bbdd1;`
`tdc-cyan-6`	`text-decoration-color: #28b1c8;`
`tdc-cyan`	`text-decoration-color: #05a4bf;`
`tdc-cyan-7`	`text-decoration-color: #048da4;`
`tdc-cyan-8`	`text-decoration-color: #04768a;`
`tdc-cyan-9`	`text-decoration-color: #035f6f;`
`tdc-cyan-10`	`text-decoration-color: #024854;`
`tdc-cyan-11`	`text-decoration-color: #023139;`
`tdc-cyan-12`	`text-decoration-color: #011a1f;`
`tdc-blue-1`	`text-decoration-color: #dfe9fa;`
`tdc-blue-2`	`text-decoration-color: #c2d6f5;`
`tdc-blue-3`	`text-decoration-color: #a6c2f0;`
`tdc-blue-4`	`text-decoration-color: #8aafeb;`
`tdc-blue-5`	`text-decoration-color: #6e9ce7;`
`tdc-blue-6`	`text-decoration-color: #5188e2;`
`tdc-blue`	`text-decoration-color: #3575dd;`
`tdc-blue-7`	`text-decoration-color: #2e65be;`
`tdc-blue-8`	`text-decoration-color: #26549f;`
`tdc-blue-9`	`text-decoration-color: #1f4480;`
`tdc-blue-10`	`text-decoration-color: #173361;`
`tdc-blue-11`	`text-decoration-color: #102342;`
`tdc-blue-12`	`text-decoration-color: #081323;`
`tdc-indigo-1`	`text-decoration-color: #e4e5f9;`
`tdc-indigo-2`	`text-decoration-color: #cdcef4;`
`tdc-indigo-3`	`text-decoration-color: #b6b7ee;`
`tdc-indigo-4`	`text-decoration-color: #9fa0e9;`
`tdc-indigo-5`	`text-decoration-color: #878ae4;`
`tdc-indigo-6`	`text-decoration-color: #7073de;`
`tdc-indigo`	`text-decoration-color: #595cd9;`
`tdc-indigo-7`	`text-decoration-color: #4d4fbb;`
`tdc-indigo-8`	`text-decoration-color: #40429c;`
`tdc-indigo-9`	`text-decoration-color: #34357e;`
`tdc-indigo-10`	`text-decoration-color: #27285f;`
`tdc-indigo-11`	`text-decoration-color: #1b1c41;`
`tdc-indigo-12`	`text-decoration-color: #0e0f23;`
`tdc-violet-1`	`text-decoration-color: #eae3fa;`
`tdc-violet-2`	`text-decoration-color: #d8cbf5;`
`tdc-violet-3`	`text-decoration-color: #c6b3f0;`
`tdc-violet-4`	`text-decoration-color: #b49beb;`
`tdc-violet-5`	`text-decoration-color: #a183e7;`
`tdc-violet-6`	`text-decoration-color: #8f6be2;`
`tdc-violet`	`text-decoration-color: #7d53dd;`
`tdc-violet-7`	`text-decoration-color: #6c47be;`
`tdc-violet-8`	`text-decoration-color: #5a3c9f;`
`tdc-violet-9`	`text-decoration-color: #493080;`
`tdc-violet-10`	`text-decoration-color: #372561;`
`tdc-violet-11`	`text-decoration-color: #261942;`
`tdc-violet-12`	`text-decoration-color: #140d23;`
`tdc-pink-1`	`text-decoration-color: #f8e1ec;`
`tdc-pink-2`	`text-decoration-color: #f2c6dc;`
`tdc-pink-3`	`text-decoration-color: #ecabcc;`
`tdc-pink-4`	`text-decoration-color: #e691bb;`
`tdc-pink-5`	`text-decoration-color: #e076ab;`
`tdc-pink-6`	`text-decoration-color: #da5c9a;`
`tdc-pink`	`text-decoration-color: #d4418a;`
`tdc-pink-7`	`text-decoration-color: #b63877;`
`tdc-pink-8`	`text-decoration-color: #992f63;`
`tdc-pink-9`	`text-decoration-color: #7b2650;`
`tdc-pink-10`	`text-decoration-color: #5d1d3d;`
`tdc-pink-11`	`text-decoration-color: #401429;`
`tdc-pink-12`	`text-decoration-color: #220a16;`
`tdc-slate-1`	`text-decoration-color: #e0e0e3;`
`tdc-slate-2`	`text-decoration-color: #c5c5ca;`
`tdc-slate-3`	`text-decoration-color: #ababb1;`
`tdc-slate-4`	`text-decoration-color: #909098;`
`tdc-slate-5`	`text-decoration-color: #757580;`
`tdc-slate-6`	`text-decoration-color: #5a5a67;`
`tdc-slate`	`text-decoration-color: #3f3f4e;`
`tdc-slate-7`	`text-decoration-color: #363643;`
`tdc-slate-8`	`text-decoration-color: #2d2d38;`
`tdc-slate-9`	`text-decoration-color: #25252d;`
`tdc-slate-10`	`text-decoration-color: #1c1c22;`
`tdc-slate-11`	`text-decoration-color: #131317;`
`tdc-slate-12`	`text-decoration-color: #0a0a0c;`
`tdc-gray-1`	`text-decoration-color: #e6e7e9;`
`tdc-gray-2`	`text-decoration-color: #cfd1d5;`
`tdc-gray-3`	`text-decoration-color: #b9bcc1;`
`tdc-gray-4`	`text-decoration-color: #a3a7ae;`
`tdc-gray-5`	`text-decoration-color: #8d929a;`
`tdc-gray-6`	`text-decoration-color: #767c87;`
`tdc-gray`	`text-decoration-color: #606773;`
`tdc-gray-7`	`text-decoration-color: #535963;`
`tdc-gray-8`	`text-decoration-color: #454a53;`
`tdc-gray-9`	`text-decoration-color: #383c43;`
`tdc-gray-10`	`text-decoration-color: #2a2d33;`
`tdc-gray-11`	`text-decoration-color: #1d1f23;`
`tdc-gray-12`	`text-decoration-color: #0f1012;`
`tdc-silver-1`	`text-decoration-color: #f5f5f6;`
`tdc-silver-2`	`text-decoration-color: #ecedee;`
`tdc-silver-3`	`text-decoration-color: #e3e4e6;`
`tdc-silver-4`	`text-decoration-color: #dadcdf;`
`tdc-silver-5`	`text-decoration-color: #d1d3d7;`
`tdc-silver-6`	`text-decoration-color: #c8cbcf;`
`tdc-silver`	`text-decoration-color: #bfc2c7;`
`tdc-silver-7`	`text-decoration-color: #a4a7ab;`
`tdc-silver-8`	`text-decoration-color: #8a8c8f;`
`tdc-silver-9`	`text-decoration-color: #6f7173;`
`tdc-silver-10`	`text-decoration-color: #545558;`
`tdc-silver-11`	`text-decoration-color: #393a3c;`
`tdc-silver-12`	`text-decoration-color: #1f1f20;`
`tdc-black`	`text-decoration-color: #000000;`
`tdc-current`	`text-decoration-color: currentColor;`
`tdc-transparent`	`text-decoration-color: transparent;`
`tdc-white`	`text-decoration-color: #ffffff;`

This example showcases various text-decoration-color utilities:

The tdc-teal utility applies the base teal shade.
The tdc-red utility applies the base red shade.
The tdc-yellow utility applies the base yellow shade.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white p-4 rad-1 ta-j tc-slate">
    <span class="h:bg-red-1 tdc-red tdl-u tdt-2">Sup</span>, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring.
    There are so many beautiful, colorful trees where I live. <span class="h:bg-yellow-1 tdc-yellow tdl-u tdt-2">I will try</span> to send you some pictures I took with the camera
    you gave me for my birthday. I've been a little under the weather lately, but <span class="h:bg-yellow-1 tdc-yellow tdl-u tdt-2">I'll bounce back</span> in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care.
    <span class="h:bg-teal-1 tdc-teal tdl-u tdt-2">- Vigo</span>
  </div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:tdc-*, md:tdc-*, lg:tdc-*, and xxl:tdc-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:tdc-* utility to override elements and change their values when hovering over them.