Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.3 is now live! 🎉

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: black;

tdc-white

 text-decoration-color: white;

tdc-transparent

 text-decoration-color: transparent;

tdc-current

 text-decoration-color: currentColor;

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.
Sup, 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. I will try 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 I'll bounce back 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. — Vigo 
<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>

Conditional styles

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

Hover variant

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

<div class="tdc-slate h:tdc-teal ..."></div>