Text Decoration Color

Set the color for text decorations.

baselinewidely

Class	CSS
tdc:red-1	text-decoration-color: #fbdfe1;
tdc:red-2	text-decoration-color: #f8c4c8;
tdc:red-3	text-decoration-color: #f4a8ae;
tdc:red-4	text-decoration-color: #f18c94;
tdc:red-5	text-decoration-color: #ed707a;
tdc:red-6	text-decoration-color: #ea5560;
tdc:red	text-decoration-color: #e63946;
tdc:red-7	text-decoration-color: #c6313c;
tdc:red-8	text-decoration-color: #a62932;
tdc:red-9	text-decoration-color: #852129;
tdc:red-10	text-decoration-color: #65191f;
tdc:red-11	text-decoration-color: #451115;
tdc:red-12	text-decoration-color: #25090b;
tdc:orange-1	text-decoration-color: #ffe7df;
tdc:orange-2	text-decoration-color: #ffd3c2;
tdc:orange-3	text-decoration-color: #ffbea6;
tdc:orange-4	text-decoration-color: #ffa98a;
tdc:orange-5	text-decoration-color: #ff946e;
tdc:orange-6	text-decoration-color: #ff8051;
tdc:orange	text-decoration-color: #ff6b35;
tdc:orange-7	text-decoration-color: #db5c2e;
tdc:orange-8	text-decoration-color: #b84d26;
tdc:orange-9	text-decoration-color: #943e1f;
tdc:orange-10	text-decoration-color: #702f17;
tdc:orange-11	text-decoration-color: #4d2010;
tdc:orange-12	text-decoration-color: #291108;
tdc:yellow-1	text-decoration-color: #fff4db;
tdc:yellow-2	text-decoration-color: #ffeabb;
tdc:yellow-3	text-decoration-color: #ffe09b;
tdc:yellow-4	text-decoration-color: #ffd67b;
tdc:yellow-5	text-decoration-color: #ffcc5c;
tdc:yellow-6	text-decoration-color: #ffc23c;
tdc:yellow	text-decoration-color: #ffb81c;
tdc:yellow-7	text-decoration-color: #db9e18;
tdc:yellow-8	text-decoration-color: #b88414;
tdc:yellow-9	text-decoration-color: #946b10;
tdc:yellow-10	text-decoration-color: #70510c;
tdc:yellow-11	text-decoration-color: #4d3708;
tdc:yellow-12	text-decoration-color: #291d04;
tdc:lime-1	text-decoration-color: #ebf7da;
tdc:lime-2	text-decoration-color: #daf0b9;
tdc:lime-3	text-decoration-color: #c9e998;
tdc:lime-4	text-decoration-color: #b8e178;
tdc:lime-5	text-decoration-color: #a6da57;
tdc:lime-6	text-decoration-color: #95d337;
tdc:lime	text-decoration-color: #84cc16;
tdc:lime-7	text-decoration-color: #72af13;
tdc:lime-8	text-decoration-color: #5f9310;
tdc:lime-9	text-decoration-color: #4d760d;
tdc:lime-10	text-decoration-color: #3a5a0a;
tdc:lime-11	text-decoration-color: #283d07;
tdc:lime-12	text-decoration-color: #152104;
tdc:mint-1	text-decoration-color: #d9f4eb;
tdc:mint-2	text-decoration-color: #b7ead9;
tdc:mint-3	text-decoration-color: #96e0c8;
tdc:mint-4	text-decoration-color: #74d6b6;
tdc:mint-5	text-decoration-color: #53cda4;
tdc:mint-6	text-decoration-color: #31c393;
tdc:mint	text-decoration-color: #10b981;
tdc:mint-7	text-decoration-color: #0e9f6f;
tdc:mint-8	text-decoration-color: #0c855d;
tdc:mint-9	text-decoration-color: #096b4b;
tdc:mint-10	text-decoration-color: #075139;
tdc:mint-11	text-decoration-color: #053827;
tdc:mint-12	text-decoration-color: #031e15;
tdc:green-1	text-decoration-color: #d7f8f0;
tdc:green-2	text-decoration-color: #b4f3e3;
tdc:green-3	text-decoration-color: #91edd5;
tdc:green-4	text-decoration-color: #6fe7c8;
tdc:green-5	text-decoration-color: #4ce1bb;
tdc:green-6	text-decoration-color: #29dcad;
tdc:green	text-decoration-color: #06d6a0;
tdc:green-7	text-decoration-color: #05b88a;
tdc:green-8	text-decoration-color: #049a73;
tdc:green-9	text-decoration-color: #037c5d;
tdc:green-10	text-decoration-color: #035e46;
tdc:green-11	text-decoration-color: #024030;
tdc:green-12	text-decoration-color: #01221a;
tdc:cyan-1	text-decoration-color: #d7f3f8;
tdc:cyan-2	text-decoration-color: #b4e9f2;
tdc:cyan-3	text-decoration-color: #91dfec;
tdc:cyan-4	text-decoration-color: #6fd5e6;
tdc:cyan-5	text-decoration-color: #4ccae0;
tdc:cyan-6	text-decoration-color: #29c0da;
tdc:cyan	text-decoration-color: #06b6d4;
tdc:cyan-7	text-decoration-color: #059db6;
tdc:cyan-8	text-decoration-color: #048399;
tdc:cyan-9	text-decoration-color: #036a7b;
tdc:cyan-10	text-decoration-color: #03505d;
tdc:cyan-11	text-decoration-color: #023740;
tdc:cyan-12	text-decoration-color: #011d22;
tdc:sky-1	text-decoration-color: #dff4fe;
tdc:sky-2	text-decoration-color: #c3ebfd;
tdc:sky-3	text-decoration-color: #a7e2fc;
tdc:sky-4	text-decoration-color: #8cd9fb;
tdc:sky-5	text-decoration-color: #70cffa;
tdc:sky-6	text-decoration-color: #54c6f9;
tdc:sky	text-decoration-color: #38bdf8;
tdc:sky-7	text-decoration-color: #30a3d5;
tdc:sky-8	text-decoration-color: #2888b3;
tdc:sky-9	text-decoration-color: #206e90;
tdc:sky-10	text-decoration-color: #19536d;
tdc:sky-11	text-decoration-color: #11394a;
tdc:sky-12	text-decoration-color: #091e28;
tdc:blue-1	text-decoration-color: #dce6fc;
tdc:blue-2	text-decoration-color: #bed0f9;
tdc:blue-3	text-decoration-color: #9fbaf6;
tdc:blue-4	text-decoration-color: #81a5f3;
tdc:blue-5	text-decoration-color: #628ff1;
tdc:blue-6	text-decoration-color: #4479ee;
tdc:blue	text-decoration-color: #2563eb;
tdc:blue-7	text-decoration-color: #2055ca;
tdc:blue-8	text-decoration-color: #1b47a9;
tdc:blue-9	text-decoration-color: #153988;
tdc:blue-10	text-decoration-color: #102c67;
tdc:blue-11	text-decoration-color: #0b1e47;
tdc:blue-12	text-decoration-color: #061026;
tdc:indigo-1	text-decoration-color: #e6e7fd;
tdc:indigo-2	text-decoration-color: #d0d1fb;
tdc:indigo-3	text-decoration-color: #babcf9;
tdc:indigo-4	text-decoration-color: #a5a6f7;
tdc:indigo-5	text-decoration-color: #8f91f5;
tdc:indigo-6	text-decoration-color: #797bf3;
tdc:indigo	text-decoration-color: #6366f1;
tdc:indigo-7	text-decoration-color: #5558cf;
tdc:indigo-8	text-decoration-color: #4749ae;
tdc:indigo-9	text-decoration-color: #393b8c;
tdc:indigo-10	text-decoration-color: #2c2d6a;
tdc:indigo-11	text-decoration-color: #1e1f48;
tdc:indigo-12	text-decoration-color: #101027;
tdc:violet-1	text-decoration-color: #ece5fe;
tdc:violet-2	text-decoration-color: #dccefc;
tdc:violet-3	text-decoration-color: #ccb7fb;
tdc:violet-4	text-decoration-color: #bca0fa;
tdc:violet-5	text-decoration-color: #ab8af9;
tdc:violet-6	text-decoration-color: #9b73f7;
tdc:violet	text-decoration-color: #8b5cf6;
tdc:violet-7	text-decoration-color: #784fd4;
tdc:violet-8	text-decoration-color: #6442b1;
tdc:violet-9	text-decoration-color: #51358f;
tdc:violet-10	text-decoration-color: #3d286c;
tdc:violet-11	text-decoration-color: #2a1c4a;
tdc:violet-12	text-decoration-color: #160f27;
tdc:lavender-1	text-decoration-color: #f1ecfe;
tdc:lavender-2	text-decoration-color: #e5dcfe;
tdc:lavender-3	text-decoration-color: #d8ccfd;
tdc:lavender-4	text-decoration-color: #ccbcfc;
tdc:lavender-5	text-decoration-color: #c0abfb;
tdc:lavender-6	text-decoration-color: #b39bfb;
tdc:lavender	text-decoration-color: #a78bfa;
tdc:lavender-7	text-decoration-color: #9078d7;
tdc:lavender-8	text-decoration-color: #7864b4;
tdc:lavender-9	text-decoration-color: #615191;
tdc:lavender-10	text-decoration-color: #493d6e;
tdc:lavender-11	text-decoration-color: #322a4b;
tdc:lavender-12	text-decoration-color: #1b1628;
tdc:magenta-1	text-decoration-color: #f9e1fc;
tdc:magenta-2	text-decoration-color: #f4c8fa;
tdc:magenta-3	text-decoration-color: #eeaef8;
tdc:magenta-4	text-decoration-color: #e994f6;
tdc:magenta-5	text-decoration-color: #e47af3;
tdc:magenta-6	text-decoration-color: #de60f1;
tdc:magenta	text-decoration-color: #d946ef;
tdc:magenta-7	text-decoration-color: #bb3cce;
tdc:magenta-8	text-decoration-color: #9c32ac;
tdc:magenta-9	text-decoration-color: #7e298b;
tdc:magenta-10	text-decoration-color: #5f1f69;
tdc:magenta-11	text-decoration-color: #411548;
tdc:magenta-12	text-decoration-color: #230b26;
tdc:pink-1	text-decoration-color: #fce2ef;
tdc:pink-2	text-decoration-color: #f9c8e0;
tdc:pink-3	text-decoration-color: #f7aed2;
tdc:pink-4	text-decoration-color: #f495c4;
tdc:pink-5	text-decoration-color: #f17bb6;
tdc:pink-6	text-decoration-color: #ef62a7;
tdc:pink	text-decoration-color: #ec4899;
tdc:pink-7	text-decoration-color: #cb3e84;
tdc:pink-8	text-decoration-color: #aa346e;
tdc:pink-9	text-decoration-color: #892a59;
tdc:pink-10	text-decoration-color: #682043;
tdc:pink-11	text-decoration-color: #47162e;
tdc:pink-12	text-decoration-color: #260c18;
tdc:coral-1	text-decoration-color: #ffe8ed;
tdc:coral-2	text-decoration-color: #ffd4de;
tdc:coral-3	text-decoration-color: #ffc0cf;
tdc:coral-4	text-decoration-color: #ffabbf;
tdc:coral-5	text-decoration-color: #ff97b0;
tdc:coral-6	text-decoration-color: #ff83a0;
tdc:coral	text-decoration-color: #ff6f91;
tdc:coral-7	text-decoration-color: #db5f7d;
tdc:coral-8	text-decoration-color: #b85068;
tdc:coral-9	text-decoration-color: #944054;
tdc:coral-10	text-decoration-color: #703140;
tdc:coral-11	text-decoration-color: #4d212c;
tdc:coral-12	text-decoration-color: #291217;
tdc:zinc-1	text-decoration-color: #e3e3e5;
tdc:zinc-2	text-decoration-color: #cbcbce;
tdc:zinc-3	text-decoration-color: #b3b3b7;
tdc:zinc-4	text-decoration-color: #9b9ba0;
tdc:zinc-5	text-decoration-color: #828289;
tdc:zinc-6	text-decoration-color: #6a6a72;
tdc:zinc	text-decoration-color: #52525b;
tdc:zinc-7	text-decoration-color: #47474e;
tdc:zinc-8	text-decoration-color: #3b3b42;
tdc:zinc-9	text-decoration-color: #303035;
tdc:zinc-10	text-decoration-color: #242428;
tdc:zinc-11	text-decoration-color: #19191b;
tdc:zinc-12	text-decoration-color: #0d0d0f;
tdc:gray-1	text-decoration-color: #e7e8eb;
tdc:gray-2	text-decoration-color: #d3d5d9;
tdc:gray-3	text-decoration-color: #bec1c7;
tdc:gray-4	text-decoration-color: #a9adb5;
tdc:gray-5	text-decoration-color: #9499a4;
tdc:gray-6	text-decoration-color: #808692;
tdc:gray	text-decoration-color: #6b7280;
tdc:gray-7	text-decoration-color: #5c626e;
tdc:gray-8	text-decoration-color: #4d525c;
tdc:gray-9	text-decoration-color: #3e424a;
tdc:gray-10	text-decoration-color: #2f3238;
tdc:gray-11	text-decoration-color: #202226;
tdc:gray-12	text-decoration-color: #111214;
tdc:slate-1	text-decoration-color: #e6e9ec;
tdc:slate-2	text-decoration-color: #d1d5dc;
tdc:slate-3	text-decoration-color: #bbc2cc;
tdc:slate-4	text-decoration-color: #a5aebc;
tdc:slate-5	text-decoration-color: #8f9bab;
tdc:slate-6	text-decoration-color: #7a879b;
tdc:slate	text-decoration-color: #64748b;
tdc:slate-7	text-decoration-color: #566478;
tdc:slate-8	text-decoration-color: #485464;
tdc:slate-9	text-decoration-color: #3a4351;
tdc:slate-10	text-decoration-color: #2c333d;
tdc:slate-11	text-decoration-color: #1e232a;
tdc:slate-12	text-decoration-color: #101316;
tdc:silver-1	text-decoration-color: #eff0f2;
tdc:silver-2	text-decoration-color: #e1e3e7;
tdc:silver-3	text-decoration-color: #d3d7dc;
tdc:silver-4	text-decoration-color: #c6cad1;
tdc:silver-5	text-decoration-color: #b8bdc5;
tdc:silver-6	text-decoration-color: #aab0ba;
tdc:silver	text-decoration-color: #9ca3af;
tdc:silver-7	text-decoration-color: #868c97;
tdc:silver-8	text-decoration-color: #70757e;
tdc:silver-9	text-decoration-color: #5a5f66;
tdc:silver-10	text-decoration-color: #45484d;
tdc:silver-11	text-decoration-color: #2f3135;
tdc:silver-12	text-decoration-color: #191a1c;
tdc:black	text-decoration-color: #000000;
tdc:current	text-decoration-color: currentColor;
tdc:transparent	text-decoration-color: transparent;
tdc:white	text-decoration-color: #ffffff;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:tdc:indigo-8.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:tdc:indigo-8	From 32rem up.
@sm:tdc:indigo-8	From 40rem up.
@md:tdc:indigo-8	From 48rem up.
@lg:tdc:indigo-8	From 64rem up.
@xl:tdc:indigo-8	From 80rem up.
@xxl:tdc:indigo-8	From 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:tdc:indigo-8	Container from 32rem up.
@c:sm:tdc:indigo-8	Container from 40rem up.
@c:md:tdc:indigo-8	Container from 48rem up.
@c:lg:tdc:indigo-8	Container from 64rem up.
@c:xl:tdc:indigo-8	Container from 80rem up.
@c:xxl:tdc:indigo-8	Container from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:tdc:indigo-8	On a touch screen.
@prm:tdc:indigo-8	With reduced motion on.
@st:tdc:indigo-8	On the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:tdc:indigo-8	On :hover.
f:tdc:indigo-8	On :focus.
fv:tdc:indigo-8	On :focus-visible.
a:tdc:indigo-8	On :active.
d:tdc:indigo-8	On :disabled.
fc:tdc:indigo-8	On :first-child.
c:tdc:indigo-8	On :checked.
e:tdc:indigo-8	On :empty.
fw:tdc:indigo-8	On :focus-within.
i:tdc:indigo-8	On :invalid.
in:tdc:indigo-8	On :indeterminate.
lc:tdc:indigo-8	On :last-child.
nc:tdc:indigo-8	On :nth-child.
r:tdc:indigo-8	On :required.
ro:tdc:indigo-8	On :read-only.
v:tdc:indigo-8	On :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::tdc:indigo-8	On ::after.
b::tdc:indigo-8	On ::before.
p::tdc:indigo-8	On ::placeholder.
s::tdc:indigo-8	On ::selection.

Opacity

Add a slash & a step after a color to set its opacity.

tdc:indigo-8/50

At 50% opacity, in steps of 5.