text-decoration-color

text-decoration-color

text-decoration-color 유틸리티는 텍스트 꾸밈선(밑줄 등)의 색상을 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

아래는 이 페이지에서 제공하는 클래스와 그에 대응하는 CSS 값이에요. 클래스 이름과 var(--color-*) 같은 토큰·색상 값은 원본 그대로 유지했어요:

`decoration-inherit`
`text-decoration-color: inherit;`
`decoration-current`
`text-decoration-color: currentColor;`
`decoration-transparent`
`text-decoration-color: transparent;`
`decoration-black`
`text-decoration-color: var(--color-black); /* #000 */`
`decoration-white`
`text-decoration-color: var(--color-white); /* #fff */`
`decoration-red-50`
`text-decoration-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`
`decoration-red-100`
`text-decoration-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`
`decoration-red-200`
`text-decoration-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`
`decoration-red-300`
`text-decoration-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`
`decoration-red-400`
`text-decoration-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`
`decoration-red-500`
`text-decoration-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */`
`decoration-red-600`
`text-decoration-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */`
`decoration-red-700`
`text-decoration-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */`
`decoration-red-800`
`text-decoration-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */`
`decoration-red-900`
`text-decoration-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */`
`decoration-red-950`
`text-decoration-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */`
`decoration-orange-50`
`text-decoration-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */`
`decoration-orange-100`
`text-decoration-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */`
`decoration-orange-200`
`text-decoration-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */`
`decoration-orange-300`
`text-decoration-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */`
`decoration-orange-400`
`text-decoration-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */`
`decoration-orange-500`
`text-decoration-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */`
`decoration-orange-600`
`text-decoration-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */`
`decoration-orange-700`
`text-decoration-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */`
`decoration-orange-800`
`text-decoration-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */`
`decoration-orange-900`
`text-decoration-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */`
`decoration-orange-950`
`text-decoration-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */`
`decoration-amber-50`
`text-decoration-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */`
`decoration-amber-100`
`text-decoration-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */`
`decoration-amber-200`
`text-decoration-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */`
`decoration-amber-300`
`text-decoration-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */`
`decoration-amber-400`
`text-decoration-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */`
`decoration-amber-500`
`text-decoration-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */`
`decoration-amber-600`
`text-decoration-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */`
`decoration-amber-700`
`text-decoration-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */`
`decoration-amber-800`
`text-decoration-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */`
`decoration-amber-900`
`text-decoration-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */`
`decoration-amber-950`
`text-decoration-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */`
`decoration-yellow-50`
`text-decoration-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */`
`decoration-yellow-100`
`text-decoration-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */`
`decoration-yellow-200`
`text-decoration-color: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */`
`decoration-yellow-300`
`text-decoration-color: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */`
`decoration-yellow-400`
`text-decoration-color: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */`
`decoration-yellow-500`
`text-decoration-color: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */`
`decoration-yellow-600`
`text-decoration-color: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */`
`decoration-yellow-700`
`text-decoration-color: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */`
`decoration-yellow-800`
`text-decoration-color: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */`
`decoration-yellow-900`
`text-decoration-color: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */`
`decoration-yellow-950`
`text-decoration-color: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */`
`decoration-lime-50`
`text-decoration-color: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */`
`decoration-lime-100`
`text-decoration-color: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */`
`decoration-lime-200`
`text-decoration-color: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */`
`decoration-lime-300`
`text-decoration-color: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */`
`decoration-lime-400`
`text-decoration-color: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */`
`decoration-lime-500`
`text-decoration-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */`
`decoration-lime-600`
`text-decoration-color: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */`
`decoration-lime-700`
`text-decoration-color: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */`
`decoration-lime-800`
`text-decoration-color: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */`
`decoration-lime-900`
`text-decoration-color: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */`
`decoration-lime-950`
`text-decoration-color: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */`
`decoration-green-50`
`text-decoration-color: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */`
`decoration-green-100`
`text-decoration-color: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */`
`decoration-green-200`
`text-decoration-color: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */`
`decoration-green-300`
`text-decoration-color: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */`
`decoration-green-400`
`text-decoration-color: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */`
`decoration-green-500`
`text-decoration-color: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */`
`decoration-green-600`
`text-decoration-color: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */`
`decoration-green-700`
`text-decoration-color: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */`
`decoration-green-800`
`text-decoration-color: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */`
`decoration-green-900`
`text-decoration-color: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */`
`decoration-green-950`
`text-decoration-color: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */`
`decoration-emerald-50`
`text-decoration-color: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */`
`decoration-emerald-100`
`text-decoration-color: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */`
`decoration-emerald-200`
`text-decoration-color: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */`
`decoration-emerald-300`
`text-decoration-color: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */`
`decoration-emerald-400`
`text-decoration-color: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */`
`decoration-emerald-500`
`text-decoration-color: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */`
`decoration-emerald-600`
`text-decoration-color: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */`
`decoration-emerald-700`
`text-decoration-color: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */`
`decoration-emerald-800`
`text-decoration-color: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */`
`decoration-emerald-900`
`text-decoration-color: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */`
`decoration-emerald-950`
`text-decoration-color: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */`
`decoration-teal-50`
`text-decoration-color: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */`
`decoration-teal-100`
`text-decoration-color: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */`
`decoration-teal-200`
`text-decoration-color: var(--color-teal-200); /* oklch(91% 0.096 180.426) */`
`decoration-teal-300`
`text-decoration-color: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */`
`decoration-teal-400`
`text-decoration-color: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */`
`decoration-teal-500`
`text-decoration-color: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */`
`decoration-teal-600`
`text-decoration-color: var(--color-teal-600); /* oklch(60% 0.118 184.704) */`
`decoration-teal-700`
`text-decoration-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */`
`decoration-teal-800`
`text-decoration-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */`
`decoration-teal-900`
`text-decoration-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */`
`decoration-teal-950`
`text-decoration-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */`
`decoration-cyan-50`
`text-decoration-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */`
`decoration-cyan-100`
`text-decoration-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */`
`decoration-cyan-200`
`text-decoration-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */`
`decoration-cyan-300`
`text-decoration-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */`
`decoration-cyan-400`
`text-decoration-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */`
`decoration-cyan-500`
`text-decoration-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */`
`decoration-cyan-600`
`text-decoration-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */`
`decoration-cyan-700`
`text-decoration-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */`
`decoration-cyan-800`
`text-decoration-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */`
`decoration-cyan-900`
`text-decoration-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */`
`decoration-cyan-950`
`text-decoration-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */`
`decoration-sky-50`
`text-decoration-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */`
`decoration-sky-100`
`text-decoration-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */`
`decoration-sky-200`
`text-decoration-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */`
`decoration-sky-300`
`text-decoration-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */`
`decoration-sky-400`
`text-decoration-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */`
`decoration-sky-500`
`text-decoration-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */`
`decoration-sky-600`
`text-decoration-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */`
`decoration-sky-700`
`text-decoration-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */`
`decoration-sky-800`
`text-decoration-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */`
`decoration-sky-900`
`text-decoration-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */`
`decoration-sky-950`
`text-decoration-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */`
`decoration-blue-50`
`text-decoration-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */`
`decoration-blue-100`
`text-decoration-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */`
`decoration-blue-200`
`text-decoration-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */`
`decoration-blue-300`
`text-decoration-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */`
`decoration-blue-400`
`text-decoration-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */`
`decoration-blue-500`
`text-decoration-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */`
`decoration-blue-600`
`text-decoration-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */`
`decoration-blue-700`
`text-decoration-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */`
`decoration-blue-800`
`text-decoration-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */`
`decoration-blue-900`
`text-decoration-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */`
`decoration-blue-950`
`text-decoration-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */`
`decoration-indigo-50`
`text-decoration-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */`
`decoration-indigo-100`
`text-decoration-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */`
`decoration-indigo-200`
`text-decoration-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */`
`decoration-indigo-300`
`text-decoration-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */`
`decoration-indigo-400`
`text-decoration-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */`
`decoration-indigo-500`
`text-decoration-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */`
`decoration-indigo-600`
`text-decoration-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */`
`decoration-indigo-700`
`text-decoration-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */`
`decoration-indigo-800`
`text-decoration-color: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */`
`decoration-indigo-900`
`text-decoration-color: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */`
`decoration-indigo-950`
`text-decoration-color: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */`
`decoration-violet-50`
`text-decoration-color: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */`
`decoration-violet-100`
`text-decoration-color: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */`
`decoration-violet-200`
`text-decoration-color: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */`
`decoration-violet-300`
`text-decoration-color: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */`
`decoration-violet-400`
`text-decoration-color: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */`
`decoration-violet-500`
`text-decoration-color: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */`
`decoration-violet-600`
`text-decoration-color: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */`
`decoration-violet-700`
`text-decoration-color: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */`
`decoration-violet-800`
`text-decoration-color: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */`
`decoration-violet-900`
`text-decoration-color: var(--color-violet-900); /* oklch(38% 0.189 293.745) */`
`decoration-violet-950`
`text-decoration-color: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */`
`decoration-purple-50`
`text-decoration-color: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */`
`decoration-purple-100`
`text-decoration-color: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */`
`decoration-purple-200`
`text-decoration-color: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */`
`decoration-purple-300`
`text-decoration-color: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */`
`decoration-purple-400`
`text-decoration-color: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */`
`decoration-purple-500`
`text-decoration-color: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */`
`decoration-purple-600`
`text-decoration-color: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */`
`decoration-purple-700`
`text-decoration-color: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */`
`decoration-purple-800`
`text-decoration-color: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */`
`decoration-purple-900`
`text-decoration-color: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */`
`decoration-purple-950`
`text-decoration-color: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */`
`decoration-fuchsia-50`
`text-decoration-color: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */`
`decoration-fuchsia-100`
`text-decoration-color: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */`
`decoration-fuchsia-200`
`text-decoration-color: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */`
`decoration-fuchsia-300`
`text-decoration-color: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */`
`decoration-fuchsia-400`
`text-decoration-color: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */`
`decoration-fuchsia-500`
`text-decoration-color: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */`
`decoration-fuchsia-600`
`text-decoration-color: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */`
`decoration-fuchsia-700`
`text-decoration-color: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */`
`decoration-fuchsia-800`
`text-decoration-color: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */`
`decoration-fuchsia-900`
`text-decoration-color: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */`
`decoration-fuchsia-950`
`text-decoration-color: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */`
`decoration-pink-50`
`text-decoration-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */`
`decoration-pink-100`
`text-decoration-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */`
`decoration-pink-200`
`text-decoration-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */`
`decoration-pink-300`
`text-decoration-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */`
`decoration-pink-400`
`text-decoration-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */`
`decoration-pink-500`
`text-decoration-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */`
`decoration-pink-600`
`text-decoration-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */`
`decoration-pink-700`
`text-decoration-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */`
`decoration-pink-800`
`text-decoration-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */`
`decoration-pink-900`
`text-decoration-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */`
`decoration-pink-950`
`text-decoration-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */`
`decoration-rose-50`
`text-decoration-color: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */`
`decoration-rose-100`
`text-decoration-color: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */`
`decoration-rose-200`
`text-decoration-color: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */`
`decoration-rose-300`
`text-decoration-color: var(--color-rose-300); /* oklch(81% 0.117 11.638) */`
`decoration-rose-400`
`text-decoration-color: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */`
`decoration-rose-500`
`text-decoration-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */`
`decoration-rose-600`
`text-decoration-color: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */`
`decoration-rose-700`
`text-decoration-color: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */`
`decoration-rose-800`
`text-decoration-color: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */`
`decoration-rose-900`
`text-decoration-color: var(--color-rose-900); /* oklch(41% 0.159 10.272) */`
`decoration-rose-950`
`text-decoration-color: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */`
`decoration-slate-50`
`text-decoration-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */`
`decoration-slate-100`
`text-decoration-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */`
`decoration-slate-200`
`text-decoration-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */`
`decoration-slate-300`
`text-decoration-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */`
`decoration-slate-400`
`text-decoration-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */`
`decoration-slate-500`
`text-decoration-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */`
`decoration-slate-600`
`text-decoration-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */`
`decoration-slate-700`
`text-decoration-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */`
`decoration-slate-800`
`text-decoration-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */`
`decoration-slate-900`
`text-decoration-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */`
`decoration-slate-950`
`text-decoration-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */`
`decoration-gray-50`
`text-decoration-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */`
`decoration-gray-100`
`text-decoration-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */`
`decoration-gray-200`
`text-decoration-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */`
`decoration-gray-300`
`text-decoration-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */`
`decoration-gray-400`
`text-decoration-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */`
`decoration-gray-500`
`text-decoration-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */`
`decoration-gray-600`
`text-decoration-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */`
`decoration-gray-700`
`text-decoration-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */`
`decoration-gray-800`
`text-decoration-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */`
`decoration-gray-900`
`text-decoration-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */`
`decoration-gray-950`
`text-decoration-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */`
`decoration-zinc-50`
`text-decoration-color: var(--color-zinc-50); /* oklch(98.5% 0 none) */`
`decoration-zinc-100`
`text-decoration-color: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */`
`decoration-zinc-200`
`text-decoration-color: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */`
`decoration-zinc-300`
`text-decoration-color: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */`
`decoration-zinc-400`
`text-decoration-color: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */`
`decoration-zinc-500`
`text-decoration-color: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */`
`decoration-zinc-600`
`text-decoration-color: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */`
`decoration-zinc-700`
`text-decoration-color: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */`
`decoration-zinc-800`
`text-decoration-color: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */`
`decoration-zinc-900`
`text-decoration-color: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */`
`decoration-zinc-950`
`text-decoration-color: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */`
`decoration-neutral-50`
`text-decoration-color: var(--color-neutral-50); /* oklch(98.5% 0 none) */`
`decoration-neutral-100`
`text-decoration-color: var(--color-neutral-100); /* oklch(97% 0 none) */`
`decoration-neutral-200`
`text-decoration-color: var(--color-neutral-200); /* oklch(92.2% 0 none) */`
`decoration-neutral-300`
`text-decoration-color: var(--color-neutral-300); /* oklch(87% 0 none) */`
`decoration-neutral-400`
`text-decoration-color: var(--color-neutral-400); /* oklch(70.8% 0 none) */`
`decoration-neutral-500`
`text-decoration-color: var(--color-neutral-500); /* oklch(55.6% 0 none) */`
`decoration-neutral-600`
`text-decoration-color: var(--color-neutral-600); /* oklch(43.9% 0 none) */`
`decoration-neutral-700`
`text-decoration-color: var(--color-neutral-700); /* oklch(37.1% 0 none) */`
`decoration-neutral-800`
`text-decoration-color: var(--color-neutral-800); /* oklch(26.9% 0 none) */`
`decoration-neutral-900`
`text-decoration-color: var(--color-neutral-900); /* oklch(20.5% 0 none) */`
`decoration-neutral-950`
`text-decoration-color: var(--color-neutral-950); /* oklch(14.5% 0 none) */`
`decoration-stone-50`
`text-decoration-color: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */`
`decoration-stone-100`
`text-decoration-color: var(--color-stone-100); /* oklch(97% 0.001 106.424) */`
`decoration-stone-200`
`text-decoration-color: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */`
`decoration-stone-300`
`text-decoration-color: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */`
`decoration-stone-400`
`text-decoration-color: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */`
`decoration-stone-500`
`text-decoration-color: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */`
`decoration-stone-600`
`text-decoration-color: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */`
`decoration-stone-700`
`text-decoration-color: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */`
`decoration-stone-800`
`text-decoration-color: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */`
`decoration-stone-900`
`text-decoration-color: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */`
`decoration-stone-950`
`text-decoration-color: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */`
`decoration-mauve-50`
`text-decoration-color: var(--color-mauve-50); /* oklch(98.5% 0 none) */`
`decoration-mauve-100`
`text-decoration-color: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */`
`decoration-mauve-200`
`text-decoration-color: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */`
`decoration-mauve-300`
`text-decoration-color: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */`
`decoration-mauve-400`
`text-decoration-color: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */`
`decoration-mauve-500`
`text-decoration-color: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */`
`decoration-mauve-600`
`text-decoration-color: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */`
`decoration-mauve-700`
`text-decoration-color: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */`
`decoration-mauve-800`
`text-decoration-color: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */`
`decoration-mauve-900`
`text-decoration-color: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */`
`decoration-mauve-950`
`text-decoration-color: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */`
`decoration-olive-50`
`text-decoration-color: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */`
`decoration-olive-100`
`text-decoration-color: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */`
`decoration-olive-200`
`text-decoration-color: var(--color-olive-200); /* oklch(93% 0.007 106.5) */`
`decoration-olive-300`
`text-decoration-color: var(--color-olive-300); /* oklch(88% 0.011 106.6) */`
`decoration-olive-400`
`text-decoration-color: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */`
`decoration-olive-500`
`text-decoration-color: var(--color-olive-500); /* oklch(58% 0.031 107.3) */`
`decoration-olive-600`
`text-decoration-color: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */`
`decoration-olive-700`
`text-decoration-color: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */`
`decoration-olive-800`
`text-decoration-color: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */`
`decoration-olive-900`
`text-decoration-color: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */`
`decoration-olive-950`
`text-decoration-color: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */`
`decoration-mist-50`
`text-decoration-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */`
`decoration-mist-100`
`text-decoration-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */`
`decoration-mist-200`
`text-decoration-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */`
`decoration-mist-300`
`text-decoration-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */`
`decoration-mist-400`
`text-decoration-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */`
`decoration-mist-500`
`text-decoration-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */`
`decoration-mist-600`
`text-decoration-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */`
`decoration-mist-700`
`text-decoration-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */`
`decoration-mist-800`
`text-decoration-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */`
`decoration-mist-900`
`text-decoration-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */`
`decoration-mist-950`
`text-decoration-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */`
`decoration-taupe-50`
`text-decoration-color: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */`
`decoration-taupe-100`
`text-decoration-color: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */`
`decoration-taupe-200`
`text-decoration-color: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */`
`decoration-taupe-300`
`text-decoration-color: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */`
`decoration-taupe-400`
`text-decoration-color: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */`
`decoration-taupe-500`
`text-decoration-color: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */`
`decoration-taupe-600`
`text-decoration-color: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */`
`decoration-taupe-700`
`text-decoration-color: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */`
`decoration-taupe-800`
`text-decoration-color: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */`
`decoration-taupe-900`
`text-decoration-color: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */`
`decoration-taupe-950`
`text-decoration-color: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */`
`decoration-(<custom-property>)`
`text-decoration-color: var(<custom-property>);`
`decoration-[<value>]`
`text-decoration-color: <value>;`

예시 (Examples)

기본 예시 (Basic example)

decoration-sky-500나 decoration-pink-500 같은 유틸리티를 사용하면 요소의 텍스트 꾸밈선 색상을 바꿀 수 있어요:

<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)

색상 불투명도 수정자(color opacity modifier)를 사용하면 요소의 텍스트 꾸밈선 색상 불투명도를 제어할 수 있어요:

<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)

decoration-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 텍스트 꾸밈선 색상을 설정할 수 있어요:

<p class="decoration-[#50d71e] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수의 경우 decoration-(<custom-property>) 문법을 사용할 수도 있어요:

<p class="decoration-(--my-color) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 decoration-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

hover 시 적용하기 (Applying on hover)

text-decoration-color 유틸리티에 hover:* 같은 변형을 붙이면 해당 상태에서만 유틸리티가 적용돼요:

텍스트 위에 마우스를 올려 기대했던 동작을 확인해 보세요.

<p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>

반응형 디자인 (Responsive design)

text-decoration-color 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<p class="underline decoration-sky-600 md:decoration-blue-400 ...">
  Lorem ipsum dolor sit amet...
</p>

테마 커스터마이징 (Customizing your theme)

--color-* 테마 변수를 사용하면 프로젝트의 색상 유틸리티를 커스터마이즈할 수 있어요:

@theme {
  --color-regal-blue: #243c5a;
}

이제 decoration-regal-blue 유틸리티를 마크업에서 사용할 수 있어요:

<p class="decoration-regal-blue">
  Lorem ipsum dolor sit amet...
</p>

테마 커스터마이징에 대해 더 알아보려면 theme 문서를 참고하세요.

더 알아보기 (Learn more)

테마 커스터마이징에 대해 더 알고 싶다면 theme 문서를, 변형(variant) 사용법은 variants 문서를 살펴보세요.