baselinewidely| Class | CSS |
|---|---|
| tdc:red-1 | text-decoration-color: oklch(0.97 0.015 22); |
| tdc:red-2 | text-decoration-color: oklch(0.91 0.046 22); |
| tdc:red-3 | text-decoration-color: oklch(0.851 0.081 22); |
| tdc:red-4 | text-decoration-color: oklch(0.791 0.12 22); |
| tdc:red-5 | text-decoration-color: oklch(0.731 0.165 22); |
| tdc:red-6 | text-decoration-color: oklch(0.672 0.208 22); |
| tdc:red | text-decoration-color: oklch(0.612 0.208 22); |
| tdc:red-7 | text-decoration-color: oklch(0.547 0.208 22); |
| tdc:red-8 | text-decoration-color: oklch(0.481 0.194 22); |
| tdc:red-9 | text-decoration-color: oklch(0.416 0.168 22); |
| tdc:red-10 | text-decoration-color: oklch(0.351 0.141 22); |
| tdc:red-11 | text-decoration-color: oklch(0.285 0.115 22); |
| tdc:red-12 | text-decoration-color: oklch(0.22 0.089 22); |
| tdc:orange-1 | text-decoration-color: oklch(0.97 0.015 39); |
| tdc:orange-2 | text-decoration-color: oklch(0.926 0.039 39); |
| tdc:orange-3 | text-decoration-color: oklch(0.882 0.065 39); |
| tdc:orange-4 | text-decoration-color: oklch(0.837 0.093 39); |
| tdc:orange-5 | text-decoration-color: oklch(0.793 0.123 39); |
| tdc:orange-6 | text-decoration-color: oklch(0.749 0.156 39); |
| tdc:orange | text-decoration-color: oklch(0.705 0.193 39); |
| tdc:orange-7 | text-decoration-color: oklch(0.624 0.193 39); |
| tdc:orange-8 | text-decoration-color: oklch(0.543 0.173 39); |
| tdc:orange-9 | text-decoration-color: oklch(0.462 0.147 39); |
| tdc:orange-10 | text-decoration-color: oklch(0.382 0.122 39); |
| tdc:orange-11 | text-decoration-color: oklch(0.301 0.096 39); |
| tdc:orange-12 | text-decoration-color: oklch(0.22 0.07 39); |
| tdc:yellow-1 | text-decoration-color: oklch(0.97 0.027 80); |
| tdc:yellow-2 | text-decoration-color: oklch(0.946 0.049 80); |
| tdc:yellow-3 | text-decoration-color: oklch(0.923 0.071 80); |
| tdc:yellow-4 | text-decoration-color: oklch(0.899 0.094 80); |
| tdc:yellow-5 | text-decoration-color: oklch(0.875 0.118 80); |
| tdc:yellow-6 | text-decoration-color: oklch(0.851 0.142 80); |
| tdc:yellow | text-decoration-color: oklch(0.828 0.167 80); |
| tdc:yellow-7 | text-decoration-color: oklch(0.726 0.151 80); |
| tdc:yellow-8 | text-decoration-color: oklch(0.625 0.13 80); |
| tdc:yellow-9 | text-decoration-color: oklch(0.524 0.109 80); |
| tdc:yellow-10 | text-decoration-color: oklch(0.423 0.088 80); |
| tdc:yellow-11 | text-decoration-color: oklch(0.321 0.067 80); |
| tdc:yellow-12 | text-decoration-color: oklch(0.22 0.046 80); |
| tdc:lime-1 | text-decoration-color: oklch(0.97 0.066 131); |
| tdc:lime-2 | text-decoration-color: oklch(0.936 0.154 131); |
| tdc:lime-3 | text-decoration-color: oklch(0.903 0.204 131); |
| tdc:lime-4 | text-decoration-color: oklch(0.869 0.204 131); |
| tdc:lime-5 | text-decoration-color: oklch(0.835 0.204 131); |
| tdc:lime-6 | text-decoration-color: oklch(0.802 0.204 131); |
| tdc:lime | text-decoration-color: oklch(0.768 0.204 131); |
| tdc:lime-7 | text-decoration-color: oklch(0.677 0.185 131); |
| tdc:lime-8 | text-decoration-color: oklch(0.585 0.16 131); |
| tdc:lime-9 | text-decoration-color: oklch(0.494 0.135 131); |
| tdc:lime-10 | text-decoration-color: oklch(0.403 0.11 131); |
| tdc:lime-11 | text-decoration-color: oklch(0.311 0.085 131); |
| tdc:lime-12 | text-decoration-color: oklch(0.22 0.06 131); |
| tdc:mint-1 | text-decoration-color: oklch(0.97 0.043 168); |
| tdc:mint-2 | text-decoration-color: oklch(0.942 0.086 168); |
| tdc:mint-3 | text-decoration-color: oklch(0.913 0.134 168); |
| tdc:mint-4 | text-decoration-color: oklch(0.885 0.15 168); |
| tdc:mint-5 | text-decoration-color: oklch(0.857 0.15 168); |
| tdc:mint-6 | text-decoration-color: oklch(0.828 0.15 168); |
| tdc:mint | text-decoration-color: oklch(0.8 0.15 168); |
| tdc:mint-7 | text-decoration-color: oklch(0.703 0.142 168); |
| tdc:mint-8 | text-decoration-color: oklch(0.607 0.123 168); |
| tdc:mint-9 | text-decoration-color: oklch(0.51 0.103 168); |
| tdc:mint-10 | text-decoration-color: oklch(0.413 0.084 168); |
| tdc:mint-11 | text-decoration-color: oklch(0.317 0.064 168); |
| tdc:mint-12 | text-decoration-color: oklch(0.22 0.045 168); |
| tdc:green-1 | text-decoration-color: oklch(0.97 0.054 142); |
| tdc:green-2 | text-decoration-color: oklch(0.918 0.161 142); |
| tdc:green-3 | text-decoration-color: oklch(0.867 0.2 142); |
| tdc:green-4 | text-decoration-color: oklch(0.815 0.2 142); |
| tdc:green-5 | text-decoration-color: oklch(0.763 0.2 142); |
| tdc:green-6 | text-decoration-color: oklch(0.712 0.2 142); |
| tdc:green | text-decoration-color: oklch(0.66 0.2 142); |
| tdc:green-7 | text-decoration-color: oklch(0.587 0.197 142); |
| tdc:green-8 | text-decoration-color: oklch(0.513 0.173 142); |
| tdc:green-9 | text-decoration-color: oklch(0.44 0.148 142); |
| tdc:green-10 | text-decoration-color: oklch(0.367 0.123 142); |
| tdc:green-11 | text-decoration-color: oklch(0.293 0.099 142); |
| tdc:green-12 | text-decoration-color: oklch(0.22 0.074 142); |
| tdc:cyan-1 | text-decoration-color: oklch(0.97 0.031 205); |
| tdc:cyan-2 | text-decoration-color: oklch(0.925 0.078 205); |
| tdc:cyan-3 | text-decoration-color: oklch(0.88 0.126 205); |
| tdc:cyan-4 | text-decoration-color: oklch(0.835 0.13 205); |
| tdc:cyan-5 | text-decoration-color: oklch(0.79 0.13 205); |
| tdc:cyan-6 | text-decoration-color: oklch(0.745 0.127 205); |
| tdc:cyan | text-decoration-color: oklch(0.7 0.12 205); |
| tdc:cyan-7 | text-decoration-color: oklch(0.62 0.106 205); |
| tdc:cyan-8 | text-decoration-color: oklch(0.54 0.092 205); |
| tdc:cyan-9 | text-decoration-color: oklch(0.46 0.079 205); |
| tdc:cyan-10 | text-decoration-color: oklch(0.38 0.065 205); |
| tdc:cyan-11 | text-decoration-color: oklch(0.3 0.051 205); |
| tdc:cyan-12 | text-decoration-color: oklch(0.22 0.038 205); |
| tdc:sky-1 | text-decoration-color: oklch(0.97 0.016 237); |
| tdc:sky-2 | text-decoration-color: oklch(0.942 0.032 237); |
| tdc:sky-3 | text-decoration-color: oklch(0.913 0.048 237); |
| tdc:sky-4 | text-decoration-color: oklch(0.885 0.065 237); |
| tdc:sky-5 | text-decoration-color: oklch(0.857 0.081 237); |
| tdc:sky-6 | text-decoration-color: oklch(0.828 0.099 237); |
| tdc:sky | text-decoration-color: oklch(0.8 0.116 237); |
| tdc:sky-7 | text-decoration-color: oklch(0.703 0.12 237); |
| tdc:sky-8 | text-decoration-color: oklch(0.607 0.12 237); |
| tdc:sky-9 | text-decoration-color: oklch(0.51 0.111 237); |
| tdc:sky-10 | text-decoration-color: oklch(0.413 0.09 237); |
| tdc:sky-11 | text-decoration-color: oklch(0.317 0.069 237); |
| tdc:sky-12 | text-decoration-color: oklch(0.22 0.048 237); |
| tdc:blue-1 | text-decoration-color: oklch(0.97 0.014 263); |
| tdc:blue-2 | text-decoration-color: oklch(0.899 0.049 263); |
| tdc:blue-3 | text-decoration-color: oklch(0.829 0.085 263); |
| tdc:blue-4 | text-decoration-color: oklch(0.758 0.123 263); |
| tdc:blue-5 | text-decoration-color: oklch(0.687 0.164 263); |
| tdc:blue-6 | text-decoration-color: oklch(0.617 0.207 263); |
| tdc:blue | text-decoration-color: oklch(0.546 0.215 263); |
| tdc:blue-7 | text-decoration-color: oklch(0.492 0.215 263); |
| tdc:blue-8 | text-decoration-color: oklch(0.437 0.215 263); |
| tdc:blue-9 | text-decoration-color: oklch(0.383 0.191 263); |
| tdc:blue-10 | text-decoration-color: oklch(0.329 0.164 263); |
| tdc:blue-11 | text-decoration-color: oklch(0.274 0.137 263); |
| tdc:blue-12 | text-decoration-color: oklch(0.22 0.11 263); |
| tdc:indigo-1 | text-decoration-color: oklch(0.97 0.014 277); |
| tdc:indigo-2 | text-decoration-color: oklch(0.906 0.046 277); |
| tdc:indigo-3 | text-decoration-color: oklch(0.842 0.079 277); |
| tdc:indigo-4 | text-decoration-color: oklch(0.778 0.114 277); |
| tdc:indigo-5 | text-decoration-color: oklch(0.714 0.151 277); |
| tdc:indigo-6 | text-decoration-color: oklch(0.65 0.189 277); |
| tdc:indigo | text-decoration-color: oklch(0.585 0.204 277); |
| tdc:indigo-7 | text-decoration-color: oklch(0.525 0.204 277); |
| tdc:indigo-8 | text-decoration-color: oklch(0.464 0.204 277); |
| tdc:indigo-9 | text-decoration-color: oklch(0.403 0.204 277); |
| tdc:indigo-10 | text-decoration-color: oklch(0.342 0.204 277); |
| tdc:indigo-11 | text-decoration-color: oklch(0.281 0.174 277); |
| tdc:indigo-12 | text-decoration-color: oklch(0.22 0.136 277); |
| tdc:violet-1 | text-decoration-color: oklch(0.97 0.015 293); |
| tdc:violet-2 | text-decoration-color: oklch(0.909 0.048 293); |
| tdc:violet-3 | text-decoration-color: oklch(0.849 0.082 293); |
| tdc:violet-4 | text-decoration-color: oklch(0.788 0.118 293); |
| tdc:violet-5 | text-decoration-color: oklch(0.727 0.156 293); |
| tdc:violet-6 | text-decoration-color: oklch(0.666 0.195 293); |
| tdc:violet | text-decoration-color: oklch(0.606 0.219 293); |
| tdc:violet-7 | text-decoration-color: oklch(0.541 0.219 293); |
| tdc:violet-8 | text-decoration-color: oklch(0.477 0.219 293); |
| tdc:violet-9 | text-decoration-color: oklch(0.413 0.219 293); |
| tdc:violet-10 | text-decoration-color: oklch(0.349 0.194 293); |
| tdc:violet-11 | text-decoration-color: oklch(0.284 0.158 293); |
| tdc:violet-12 | text-decoration-color: oklch(0.22 0.122 293); |
| tdc:lavender-1 | text-decoration-color: oklch(0.97 0.016 294); |
| tdc:lavender-2 | text-decoration-color: oklch(0.926 0.039 294); |
| tdc:lavender-3 | text-decoration-color: oklch(0.883 0.063 294); |
| tdc:lavender-4 | text-decoration-color: oklch(0.839 0.088 294); |
| tdc:lavender-5 | text-decoration-color: oklch(0.796 0.114 294); |
| tdc:lavender-6 | text-decoration-color: oklch(0.752 0.141 294); |
| tdc:lavender | text-decoration-color: oklch(0.709 0.159 294); |
| tdc:lavender-7 | text-decoration-color: oklch(0.627 0.159 294); |
| tdc:lavender-8 | text-decoration-color: oklch(0.546 0.159 294); |
| tdc:lavender-9 | text-decoration-color: oklch(0.464 0.159 294); |
| tdc:lavender-10 | text-decoration-color: oklch(0.383 0.159 294); |
| tdc:lavender-11 | text-decoration-color: oklch(0.301 0.159 294); |
| tdc:lavender-12 | text-decoration-color: oklch(0.22 0.122 294); |
| tdc:magenta-1 | text-decoration-color: oklch(0.97 0.024 322); |
| tdc:magenta-2 | text-decoration-color: oklch(0.919 0.066 322); |
| tdc:magenta-3 | text-decoration-color: oklch(0.869 0.11 322); |
| tdc:magenta-4 | text-decoration-color: oklch(0.818 0.156 322); |
| tdc:magenta-5 | text-decoration-color: oklch(0.768 0.204 322); |
| tdc:magenta-6 | text-decoration-color: oklch(0.717 0.255 322); |
| tdc:magenta | text-decoration-color: oklch(0.667 0.259 322); |
| tdc:magenta-7 | text-decoration-color: oklch(0.592 0.259 322); |
| tdc:magenta-8 | text-decoration-color: oklch(0.518 0.246 322); |
| tdc:magenta-9 | text-decoration-color: oklch(0.443 0.21 322); |
| tdc:magenta-10 | text-decoration-color: oklch(0.369 0.175 322); |
| tdc:magenta-11 | text-decoration-color: oklch(0.294 0.14 322); |
| tdc:magenta-12 | text-decoration-color: oklch(0.22 0.104 322); |
| tdc:pink-1 | text-decoration-color: oklch(0.97 0.017 354); |
| tdc:pink-2 | text-decoration-color: oklch(0.918 0.048 354); |
| tdc:pink-3 | text-decoration-color: oklch(0.865 0.082 354); |
| tdc:pink-4 | text-decoration-color: oklch(0.813 0.12 354); |
| tdc:pink-5 | text-decoration-color: oklch(0.761 0.163 354); |
| tdc:pink-6 | text-decoration-color: oklch(0.708 0.212 354); |
| tdc:pink | text-decoration-color: oklch(0.656 0.212 354); |
| tdc:pink-7 | text-decoration-color: oklch(0.583 0.212 354); |
| tdc:pink-8 | text-decoration-color: oklch(0.511 0.21 354); |
| tdc:pink-9 | text-decoration-color: oklch(0.438 0.18 354); |
| tdc:pink-10 | text-decoration-color: oklch(0.365 0.15 354); |
| tdc:pink-11 | text-decoration-color: oklch(0.293 0.12 354); |
| tdc:pink-12 | text-decoration-color: oklch(0.22 0.091 354); |
| tdc:coral-1 | text-decoration-color: oklch(0.97 0.015 8); |
| tdc:coral-2 | text-decoration-color: oklch(0.929 0.037 8); |
| tdc:coral-3 | text-decoration-color: oklch(0.888 0.061 8); |
| tdc:coral-4 | text-decoration-color: oklch(0.848 0.086 8); |
| tdc:coral-5 | text-decoration-color: oklch(0.807 0.114 8); |
| tdc:coral-6 | text-decoration-color: oklch(0.766 0.144 8); |
| tdc:coral | text-decoration-color: oklch(0.725 0.177 8); |
| tdc:coral-7 | text-decoration-color: oklch(0.641 0.177 8); |
| tdc:coral-8 | text-decoration-color: oklch(0.557 0.177 8); |
| tdc:coral-9 | text-decoration-color: oklch(0.473 0.177 8); |
| tdc:coral-10 | text-decoration-color: oklch(0.388 0.156 8); |
| tdc:coral-11 | text-decoration-color: oklch(0.304 0.122 8); |
| tdc:coral-12 | text-decoration-color: oklch(0.22 0.088 8); |
| tdc:zinc-1 | text-decoration-color: oklch(0.97 0.015 286); |
| tdc:zinc-2 | text-decoration-color: oklch(0.882 0.015 286); |
| tdc:zinc-3 | text-decoration-color: oklch(0.794 0.015 286); |
| tdc:zinc-4 | text-decoration-color: oklch(0.706 0.015 286); |
| tdc:zinc-5 | text-decoration-color: oklch(0.618 0.015 286); |
| tdc:zinc-6 | text-decoration-color: oklch(0.53 0.015 286); |
| tdc:zinc | text-decoration-color: oklch(0.442 0.015 286); |
| tdc:zinc-7 | text-decoration-color: oklch(0.405 0.015 286); |
| tdc:zinc-8 | text-decoration-color: oklch(0.368 0.015 286); |
| tdc:zinc-9 | text-decoration-color: oklch(0.331 0.015 286); |
| tdc:zinc-10 | text-decoration-color: oklch(0.294 0.015 286); |
| tdc:zinc-11 | text-decoration-color: oklch(0.257 0.015 286); |
| tdc:zinc-12 | text-decoration-color: oklch(0.22 0.015 286); |
| tdc:gray-1 | text-decoration-color: oklch(0.97 0.014 264); |
| tdc:gray-2 | text-decoration-color: oklch(0.9 0.023 264); |
| tdc:gray-3 | text-decoration-color: oklch(0.83 0.023 264); |
| tdc:gray-4 | text-decoration-color: oklch(0.761 0.023 264); |
| tdc:gray-5 | text-decoration-color: oklch(0.691 0.023 264); |
| tdc:gray-6 | text-decoration-color: oklch(0.621 0.023 264); |
| tdc:gray | text-decoration-color: oklch(0.551 0.023 264); |
| tdc:gray-7 | text-decoration-color: oklch(0.496 0.023 264); |
| tdc:gray-8 | text-decoration-color: oklch(0.441 0.023 264); |
| tdc:gray-9 | text-decoration-color: oklch(0.386 0.023 264); |
| tdc:gray-10 | text-decoration-color: oklch(0.33 0.023 264); |
| tdc:gray-11 | text-decoration-color: oklch(0.275 0.023 264); |
| tdc:gray-12 | text-decoration-color: oklch(0.22 0.023 264); |
| tdc:slate-1 | text-decoration-color: oklch(0.97 0.014 257); |
| tdc:slate-2 | text-decoration-color: oklch(0.901 0.041 257); |
| tdc:slate-3 | text-decoration-color: oklch(0.831 0.041 257); |
| tdc:slate-4 | text-decoration-color: oklch(0.762 0.041 257); |
| tdc:slate-5 | text-decoration-color: oklch(0.693 0.041 257); |
| tdc:slate-6 | text-decoration-color: oklch(0.624 0.041 257); |
| tdc:slate | text-decoration-color: oklch(0.554 0.041 257); |
| tdc:slate-7 | text-decoration-color: oklch(0.499 0.041 257); |
| tdc:slate-8 | text-decoration-color: oklch(0.443 0.041 257); |
| tdc:slate-9 | text-decoration-color: oklch(0.387 0.041 257); |
| tdc:slate-10 | text-decoration-color: oklch(0.331 0.041 257); |
| tdc:slate-11 | text-decoration-color: oklch(0.276 0.041 257); |
| tdc:slate-12 | text-decoration-color: oklch(0.22 0.041 257); |
| tdc:silver-1 | text-decoration-color: oklch(0.97 0.014 261); |
| tdc:silver-2 | text-decoration-color: oklch(0.927 0.019 261); |
| tdc:silver-3 | text-decoration-color: oklch(0.885 0.019 261); |
| tdc:silver-4 | text-decoration-color: oklch(0.842 0.019 261); |
| tdc:silver-5 | text-decoration-color: oklch(0.799 0.019 261); |
| tdc:silver-6 | text-decoration-color: oklch(0.756 0.019 261); |
| tdc:silver | text-decoration-color: oklch(0.714 0.019 261); |
| tdc:silver-7 | text-decoration-color: oklch(0.631 0.019 261); |
| tdc:silver-8 | text-decoration-color: oklch(0.549 0.019 261); |
| tdc:silver-9 | text-decoration-color: oklch(0.467 0.019 261); |
| tdc:silver-10 | text-decoration-color: oklch(0.385 0.019 261); |
| tdc:silver-11 | text-decoration-color: oklch(0.302 0.019 261); |
| tdc:silver-12 | text-decoration-color: oklch(0.22 0.019 261); |
| 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. |