字体排印
颜色
用于控制元素文本颜色的实用工具。
| 类 | 样式 |
|---|---|
text-inherit | color: inherit; |
text-current | color: currentColor; |
text-transparent | color: transparent; |
text-black | color: var(--color-black); /* #000 */ |
text-white | color: var(--color-white); /* #fff */ |
text-red-50 | color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */ |
text-red-100 | color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */ |
text-red-200 | color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */ |
text-red-300 | color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */ |
text-red-400 | color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */ |
text-red-500 | color: var(--color-red-500); /* oklch(0.637 0.237 25.331) */ |
text-red-600 | color: var(--color-red-600); /* oklch(0.577 0.245 27.325) */ |
text-red-700 | color: var(--color-red-700); /* oklch(0.505 0.213 27.518) */ |
text-red-800 | color: var(--color-red-800); /* oklch(0.444 0.177 26.899) */ |
text-red-900 | color: var(--color-red-900); /* oklch(0.396 0.141 25.723) */ |
text-red-950 | color: var(--color-red-950); /* oklch(0.258 0.092 26.042) */ |
text-orange-50 | color: var(--color-orange-50); /* oklch(0.98 0.016 73.684) */ |
text-orange-100 | color: var(--color-orange-100); /* oklch(0.954 0.038 75.164) */ |
text-orange-200 | color: var(--color-orange-200); /* oklch(0.901 0.076 70.697) */ |
text-orange-300 | color: var(--color-orange-300); /* oklch(0.837 0.128 66.29) */ |
text-orange-400 | color: var(--color-orange-400); /* oklch(0.75 0.183 55.934) */ |
text-orange-500 | color: var(--color-orange-500); /* oklch(0.705 0.213 47.604) */ |
text-orange-600 | color: var(--color-orange-600); /* oklch(0.646 0.222 41.116) */ |
text-orange-700 | color: var(--color-orange-700); /* oklch(0.553 0.195 38.402) */ |
text-orange-800 | color: var(--color-orange-800); /* oklch(0.47 0.157 37.304) */ |
text-orange-900 | color: var(--color-orange-900); /* oklch(0.408 0.123 38.172) */ |
text-orange-950 | color: var(--color-orange-950); /* oklch(0.266 0.079 36.259) */ |
text-amber-50 | color: var(--color-amber-50); /* oklch(0.987 0.022 95.277) */ |
text-amber-100 | color: var(--color-amber-100); /* oklch(0.962 0.059 95.617) */ |
text-amber-200 | 颜色：var(--color-amber-200); /* oklch(0.924 0.12 95.746) */ |
text-amber-300 | 颜色：var(--color-amber-300); /* oklch(0.879 0.169 91.605) */ |
text-amber-400 | 颜色：var(--color-amber-400); /* oklch(0.828 0.189 84.429) */ |
text-amber-500 | 颜色：var(--color-amber-500); /* oklch(0.769 0.188 70.08) */ |
text-amber-600 | 颜色：var(--color-amber-600); /* oklch(0.666 0.179 58.318) */ |
text-amber-700 | 颜色：var(--color-amber-700); /* oklch(0.555 0.163 48.998) */ |
text-amber-800 | 颜色：var(--color-amber-800); /* oklch(0.473 0.137 46.201) */ |
text-amber-900 | 颜色：var(--color-amber-900); /* oklch(0.414 0.112 45.904) */ |
text-amber-950 | 颜色：var(--color-amber-950); /* oklch(0.279 0.077 45.635) */ |
text-yellow-50 | 颜色：var(--color-yellow-50); /* oklch(0.987 0.026 102.212) */ |
text-yellow-100 | 颜色：var(--color-yellow-100); /* oklch(0.973 0.071 103.193) */ |
text-yellow-200 | 颜色：var(--color-yellow-200); /* oklch(0.945 0.129 101.54) */ |
text-yellow-300 | 颜色：var(--color-yellow-300); /* oklch(0.905 0.182 98.111) */ |
text-yellow-400 | 颜色：var(--color-yellow-400); /* oklch(0.852 0.199 91.936) */ |
text-yellow-500 | 颜色：var(--color-yellow-500); /* oklch(0.795 0.184 86.047) */ |
text-yellow-600 | 颜色：var(--color-yellow-600); /* oklch(0.681 0.162 75.834) */ |
text-yellow-700 | 颜色：var(--color-yellow-700); /* oklch(0.554 0.135 66.442) */ |
text-yellow-800 | 颜色：var(--color-yellow-800); /* oklch(0.476 0.114 61.907) */ |
text-yellow-900 | 颜色：var(--color-yellow-900); /* oklch(0.421 0.095 57.708) */ |
text-yellow-950 | 颜色：var(--color-yellow-950); /* oklch(0.286 0.066 53.813) */ |
text-lime-50 | 颜色：var(--color-lime-50); /* oklch(0.986 0.031 120.757) */ |
text-lime-100 | 颜色：var(--color-lime-100); /* oklch(0.967 0.067 122.328) */ |
text-lime-200 | 颜色：var(--color-lime-200); /* oklch(0.938 0.127 124.321) */ |
text-lime-300 | 颜色：var(--color-lime-300); /* oklch(0.897 0.196 126.665) */ |
text-lime-400 | 颜色：var(--color-lime-400); /* oklch(0.841 0.238 128.85) */ |
text-lime-500 | 颜色：var(--color-lime-500); /* oklch(0.768 0.233 130.85) */ |
text-lime-600 | 颜色：var(--color-lime-600); /* oklch(0.648 0.2 131.684) */ |
text-lime-700 | 颜色：var(--color-lime-700); /* oklch(0.532 0.157 131.589) */ |
text-lime-800 | 颜色：var(--color-lime-800); /* oklch(0.453 0.124 130.933) */ |
text-lime-900 | 颜色：var(--color-lime-900); /* oklch(0.405 0.101 131.063) */ |
text-lime-950 | 颜色：var(--color-lime-950); /* oklch(0.274 0.072 132.109) */ |
text-green-50 | 颜色：var(--color-green-50); /* oklch(0.982 0.018 155.826) */ |
text-green-100 | 颜色：var(--color-green-100); /* oklch(0.962 0.044 156.743) */ |
text-green-200 | 颜色：var(--color-green-200); /* oklch(0.925 0.084 155.995) */ |
text-green-300 | 颜色：var(--color-green-300); /* oklch(0.871 0.15 154.449) */ |
text-green-400 | 颜色：var(--color-green-400); /* oklch(0.792 0.209 151.711) */ |
text-green-500 | 颜色：var(--color-green-500); /* oklch(0.723 0.219 149.579) */ |
text-green-600 | 颜色：var(--color-green-600); /* oklch(0.627 0.194 149.214) */ |
text-green-700 | 颜色：var(--color-green-700); /* oklch(0.527 0.154 150.069) */ |
text-green-800 | 颜色：var(--color-green-800); /* oklch(0.448 0.119 151.328) */ |
text-green-900 | 颜色：var(--color-green-900); /* oklch(0.393 0.095 152.535) */ |
text-green-950 | 颜色：var(--color-green-950); /* oklch(0.266 0.065 152.934) */ |
text-emerald-50 | 颜色：var(--color-emerald-50); /* oklch(0.979 0.021 166.113) */ |
text-emerald-100 | 颜色：var(--color-emerald-100); /* oklch(0.95 0.052 163.051) */ |
text-emerald-200 | 颜色：var(--color-emerald-200); /* oklch(0.905 0.093 164.15) */ |
text-emerald-300 | 颜色：var(--color-emerald-300); /* oklch(0.845 0.143 164.978) */ |
text-emerald-400 | 颜色：var(--color-emerald-400); /* oklch(0.765 0.177 163.223) */ |
text-emerald-500 | 颜色：var(--color-emerald-500); /* oklch(0.696 0.17 162.48) */ |
text-emerald-600 | 颜色：var(--color-emerald-600); /* oklch(0.596 0.145 163.225) */ |
text-emerald-700 | 颜色：var(--color-emerald-700); /* oklch(0.508 0.118 165.612) */ |
text-emerald-800 | 颜色：var(--color-emerald-800); /* oklch(0.432 0.095 166.913) */ |
text-emerald-900 | 颜色：var(--color-emerald-900); /* oklch(0.378 0.077 168.94) */ |
text-emerald-950 | 颜色：var(--color-emerald-950); /* oklch(0.262 0.051 172.552) */ |
text-teal-50 | 颜色：var(--color-teal-50); /* oklch(0.984 0.014 180.72) */ |
text-teal-100 | 颜色：var(--color-teal-100); /* oklch(0.953 0.051 180.801) */ |
text-teal-200 | 颜色：var(--color-teal-200); /* oklch(0.91 0.096 180.426) */ |
text-teal-300 | 颜色：var(--color-teal-300); /* oklch(0.855 0.138 181.071) */ |
text-teal-400 | 颜色：var(--color-teal-400); /* oklch(0.777 0.152 181.912) */ |
text-teal-500 | 颜色：var(--color-teal-500); /* oklch(0.704 0.14 182.503) */ |
text-teal-600 | 颜色：var(--color-teal-600); /* oklch(0.6 0.118 184.704) */ |
text-teal-700 | 颜色：var(--color-teal-700); /* oklch(0.511 0.096 186.391) */ |
text-teal-800 | 颜色：var(--color-teal-800); /* oklch(0.437 0.078 188.216) */ |
text-teal-900 | 颜色：var(--color-teal-900); /* oklch(0.386 0.063 188.416) */ |
text-teal-950 | 颜色：var(--color-teal-950); /* oklch(0.277 0.046 192.524) */ |
text-cyan-50 | 颜色：var(--color-cyan-50); /* oklch(0.984 0.019 200.873) */ |
text-cyan-100 | 颜色：var(--color-cyan-100); /* oklch(0.956 0.045 203.388) */ |
text-cyan-200 | 颜色：var(--color-cyan-200); /* oklch(0.917 0.08 205.041) */ |
text-cyan-300 | 颜色：var(--color-cyan-300); /* oklch(0.865 0.127 207.078) */ |
text-cyan-400 | 颜色：var(--color-cyan-400); /* oklch(0.789 0.154 211.53) */ |
text-cyan-500 | 颜色：var(--color-cyan-500); /* oklch(0.715 0.143 215.221) */ |
text-cyan-600 | 颜色：var(--color-cyan-600); /* oklch(0.609 0.126 221.723) */ |
text-cyan-700 | 颜色：var(--color-cyan-700); /* oklch(0.52 0.105 223.128) */ |
text-cyan-800 | 颜色：var(--color-cyan-800); /* oklch(0.45 0.085 224.283) */ |
text-cyan-900 | 颜色：var(--color-cyan-900); /* oklch(0.398 0.07 227.392) */ |
text-cyan-950 | 颜色：var(--color-cyan-950); /* oklch(0.302 0.056 229.695) */ |
文本颜色-天蓝色-50 | 颜色：var(--color-sky-50); /* oklch(0.977 0.013 236.62) */ |
文本颜色-天蓝色-100 | 颜色：var(--color-sky-100); /* oklch(0.951 0.026 236.824) */ |
文本颜色-天蓝色-200 | 颜色：var(--color-sky-200); /* oklch(0.901 0.058 230.902) */ |
文本颜色-天蓝色-300 | 颜色：var(--color-sky-300); /* oklch(0.828 0.111 230.318) */ |
文本颜色-天蓝色-400 | 颜色：var(--color-sky-400); /* oklch(0.746 0.16 232.661) */ |
文本颜色-天蓝色-500 | 颜色：var(--color-sky-500); /* oklch(0.685 0.169 237.323) */ |
文本颜色-天蓝色-600 | 颜色：var(--color-sky-600); /* oklch(0.588 0.158 241.966) */ |
文本颜色-天蓝色-700 | 颜色：var(--color-sky-700); /* oklch(0.5 0.134 242.749) */ |
文本颜色-天蓝色-800 | 颜色：var(--color-sky-800); /* oklch(0.443 0.11 240.79) */ |
文本颜色-天蓝色-900 | 颜色：var(--color-sky-900); /* oklch(0.391 0.09 240.876) */ |
文本颜色-天蓝色-950 | 颜色：var(--color-sky-950); /* oklch(0.293 0.066 243.157) */ |
文本颜色-蓝色-50 | 颜色：var(--color-blue-50); /* oklch(0.97 0.014 254.604) */ |
文本颜色-蓝色-100 | 颜色：var(--color-blue-100); /* oklch(0.932 0.032 255.585) */ |
文本颜色-蓝色-200 | 颜色：var(--color-blue-200); /* oklch(0.882 0.059 254.128) */ |
文本颜色-蓝色-300 | 颜色：var(--color-blue-300); /* oklch(0.809 0.105 251.813) */ |
文本颜色-蓝色-400 | 颜色：var(--color-blue-400); /* oklch(0.707 0.165 254.624) */ |
文本颜色-蓝色-500 | 颜色：var(--color-blue-500); /* oklch(0.623 0.214 259.815) */ |
文本颜色-蓝色-600 | 颜色：var(--color-blue-600); /* oklch(0.546 0.245 262.881) */ |
文本颜色-蓝色-700 | 颜色：var(--color-blue-700); /* oklch(0.488 0.243 264.376) */ |
文本颜色-蓝色-800 | 颜色：var(--color-blue-800); /* oklch(0.424 0.199 265.638) */ |
文本颜色-蓝色-900 | 颜色：var(--color-blue-900); /* oklch(0.379 0.146 265.522) */ |
文本颜色-蓝色-950 | 颜色：var(--color-blue-950); /* oklch(0.282 0.091 267.935) */ |
文本颜色-靛蓝色-50 | 颜色：var(--color-indigo-50); /* oklch(0.962 0.018 272.314) */ |
文本颜色-靛蓝色-100 | 颜色：var(--color-indigo-100); /* oklch(0.93 0.034 272.788) */ |
文本颜色-靛蓝色-200 | 颜色：var(--color-indigo-200); /* oklch(0.87 0.065 274.039) */ |
文本颜色-靛蓝色-300 | 颜色：var(--color-indigo-300); /* oklch(0.785 0.115 274.713) */ |
文本颜色-靛蓝色-400 | 颜色：var(--color-indigo-400); /* oklch(0.673 0.182 276.935) */ |
文本颜色-靛蓝色-500 | 颜色：var(--color-indigo-500); /* oklch(0.585 0.233 277.117) */ |
文本颜色-靛蓝色-600 | 颜色：var(--color-indigo-600); /* oklch(0.511 0.262 276.966) */ |
文本颜色-靛蓝色-700 | 颜色：var(--color-indigo-700); /* oklch(0.457 0.24 277.023) */ |
文本颜色-靛蓝色-800 | 颜色：var(--color-indigo-800); /* oklch(0.398 0.195 277.366) */ |
文本颜色-靛蓝色-900 | 颜色：var(--color-indigo-900); /* oklch(0.359 0.144 278.697) */ |
文本颜色-靛蓝色-950 | 颜色：var(--color-indigo-950); /* oklch(0.257 0.09 281.288) */ |
文本颜色-紫罗兰色-50 | 颜色：var(--color-violet-50); /* oklch(0.969 0.016 293.756) */ |
文本颜色-紫罗兰色-100 | 颜色：var(--color-violet-100); /* oklch(0.943 0.029 294.588) */ |
文本颜色-紫罗兰色-200 | 颜色：var(--color-violet-200); /* oklch(0.894 0.057 293.283) */ |
文本颜色-紫罗兰色-300 | 颜色：var(--color-violet-300); /* oklch(0.811 0.111 293.571) */ |
文本颜色-紫罗兰色-400 | 颜色：var(--color-violet-400); /* oklch(0.702 0.183 293.541) */ |
文本颜色-紫罗兰色-500 | 颜色：var(--color-violet-500); /* oklch(0.606 0.25 292.717) */ |
文本颜色-紫罗兰色-600 | 颜色：var(--color-violet-600); /* oklch(0.541 0.281 293.009) */ |
文本颜色-紫罗兰色-700 | 颜色：var(--color-violet-700); /* oklch(0.491 0.27 292.581) */ |
文本颜色-紫罗兰色-800 | 颜色：var(--color-violet-800); /* oklch(0.432 0.232 292.759) */ |
文本颜色-紫罗兰色-900 | 颜色：var(--color-violet-900); /* oklch(0.38 0.189 293.745) */ |
文本颜色-紫罗兰色-950 | 颜色：var(--color-violet-950); /* oklch(0.283 0.141 291.089) */ |
文本颜色-紫色-50 | 颜色：var(--color-purple-50); /* oklch(0.977 0.014 308.299) */ |
文本颜色-紫色-100 | 颜色：var(--color-purple-100); /* oklch(0.946 0.033 307.174) */ |
文本颜色-紫色-200 | 颜色：var(--color-purple-200); /* oklch(0.902 0.063 306.703) */ |
文本颜色-紫色-300 | 颜色：var(--color-purple-300); /* oklch(0.827 0.119 306.383) */ |
文本颜色-紫色-400 | 颜色：var(--color-purple-400); /* oklch(0.714 0.203 305.504) */ |
文本颜色-紫色-500 | 颜色：var(--color-purple-500); /* oklch(0.627 0.265 303.9) */ |
文本颜色-紫色-600 | 颜色：var(--color-purple-600); /* oklch(0.558 0.288 302.321) */ |
文本颜色-紫色-700 | 颜色：var(--color-purple-700); /* oklch(0.496 0.265 301.924) */ |
文本颜色-紫色-800 | 颜色：var(--color-purple-800); /* oklch(0.438 0.218 303.724) */ |
文本颜色-紫色-900 | 颜色：var(--color-purple-900); /* oklch(0.381 0.176 304.987) */ |
文本颜色-紫色-950 | 颜色：var(--color-purple-950); /* oklch(0.291 0.149 302.717) */ |
文本颜色-紫红色-50 | 颜色：var(--color-fuchsia-50); /* oklch(0.977 0.017 320.058) */ |
文本颜色-紫红色-100 | 颜色：var(--color-fuchsia-100); /* oklch(0.952 0.037 318.852) */ |
文本颜色-紫红色-200 | 颜色：var(--color-fuchsia-200); /* oklch(0.903 0.076 319.62) */ |
文本颜色-紫红色-300 | 颜色：var(--color-fuchsia-300); /* oklch(0.833 0.145 321.434) */ |
文本颜色-紫红色-400 | 颜色：var(--color-fuchsia-400); /* oklch(0.74 0.238 322.16) */ |
文本颜色-紫红色-500 | 颜色：var(--color-fuchsia-500); /* oklch(0.667 0.295 322.15) */ |
文本颜色-紫红色-600 | 颜色：var(--color-fuchsia-600); /* oklch(0.591 0.293 322.896) */ |
文本颜色-紫红色-700 | 颜色：var(--color-fuchsia-700); /* oklch(0.518 0.253 323.949) */ |
文本颜色-紫红色-800 | 颜色：var(--color-fuchsia-800); /* oklch(0.452 0.211 324.591) */ |
文本颜色-紫红色-900 | 颜色：var(--color-fuchsia-900); /* oklch(0.401 0.17 325.612) */ |
文本颜色-紫红色-950 | 颜色：var(--color-fuchsia-950); /* oklch(0.293 0.136 325.661) */ |
文本颜色-粉红色-50 | 颜色：var(--color-pink-50); /* oklch(0.971 0.014 343.198) */ |
文本颜色-粉红色-100 | 颜色：var(--color-pink-100); /* oklch(0.948 0.028 342.258) */ |
文本颜色-粉红色-200 | 颜色：var(--color-pink-200); /* oklch(0.899 0.061 343.231) */ |
文本颜色-粉红色-300 | 颜色：var(--color-pink-300); /* oklch(0.823 0.12 346.018) */ |
文本颜色-粉红色-400 | 颜色：var(--color-pink-400); /* oklch(0.718 0.202 349.761) */ |
文本颜色-粉红色-500 | 颜色：var(--color-pink-500); /* oklch(0.656 0.241 354.308) */ |
文本颜色-粉红色-600 | 颜色：var(--color-pink-600); /* oklch(0.592 0.249 0.584) */ |
文本颜色-粉红色-700 | 颜色：var(--color-pink-700); /* oklch(0.525 0.223 3.958) */ |
文本颜色-粉红色-800 | 颜色：var(--color-pink-800); /* oklch(0.459 0.187 3.815) */ |
文本颜色-粉红色-900 | 颜色：var(--color-pink-900); /* oklch(0.408 0.153 2.432) */ |
text-pink-950 | 颜色：var(--color-pink-950); /* oklch(0.284 0.109 3.907) */ |
text-rose-50 | 颜色：var(--color-rose-50); /* oklch(0.969 0.015 12.422) */ |
text-rose-100 | 颜色：var(--color-rose-100); /* oklch(0.941 0.03 12.58) */ |
text-rose-200 | 颜色：var(--color-rose-200); /* oklch(0.892 0.058 10.001) */ |
text-rose-300 | 颜色：var(--color-rose-300); /* oklch(0.81 0.117 11.638) */ |
text-rose-400 | 颜色：var(--color-rose-400); /* oklch(0.712 0.194 13.428) */ |
text-rose-500 | 颜色：var(--color-rose-500); /* oklch(0.645 0.246 16.439) */ |
text-rose-600 | 颜色：var(--color-rose-600); /* oklch(0.586 0.253 17.585) */ |
text-rose-700 | 颜色：var(--color-rose-700); /* oklch(0.514 0.222 16.935) */ |
text-rose-800 | 颜色：var(--color-rose-800); /* oklch(0.455 0.188 13.697) */ |
text-rose-900 | 颜色：var(--color-rose-900); /* oklch(0.41 0.159 10.272) */ |
text-rose-950 | 颜色：var(--color-rose-950); /* oklch(0.271 0.105 12.094) */ |
text-slate-50 | 颜色：var(--color-slate-50); /* oklch(0.984 0.003 247.858) */ |
text-slate-100 | 颜色：var(--color-slate-100); /* oklch(0.968 0.007 247.896) */ |
text-slate-200 | 颜色：var(--color-slate-200); /* oklch(0.929 0.013 255.508) */ |
text-slate-300 | 颜色：var(--color-slate-300); /* oklch(0.869 0.022 252.894) */ |
text-slate-400 | 颜色：var(--color-slate-400); /* oklch(0.704 0.04 256.788) */ |
text-slate-500 | 颜色：var(--color-slate-500); /* oklch(0.554 0.046 257.417) */ |
text-slate-600 | 颜色：var(--color-slate-600); /* oklch(0.446 0.043 257.281) */ |
text-slate-700 | 颜色：var(--color-slate-700); /* oklch(0.372 0.044 257.287) */ |
text-slate-800 | 颜色：var(--color-slate-800); /* oklch(0.279 0.041 260.031) */ |
text-slate-900 | 颜色：var(--color-slate-900); /* oklch(0.208 0.042 265.755) */ |
text-slate-950 | 颜色：var(--color-slate-950); /* oklch(0.129 0.042 264.695) */ |
text-gray-50 | 颜色：var(--color-gray-50); /* oklch(0.985 0.002 247.839) */ |
text-gray-100 | 颜色：var(--color-gray-100); /* oklch(0.967 0.003 264.542) */ |
text-gray-200 | 颜色：var(--color-gray-200); /* oklch(0.928 0.006 264.531) */ |
text-gray-300 | 颜色：var(--color-gray-300); /* oklch(0.872 0.01 258.338) */ |
text-gray-400 | 颜色：var(--color-gray-400); /* oklch(0.707 0.022 261.325) */ |
text-gray-500 | 颜色：var(--color-gray-500); /* oklch(0.551 0.027 264.364) */ |
text-gray-600 | 颜色：var(--color-gray-600); /* oklch(0.446 0.03 256.802) */ |
text-gray-700 | 颜色：var(--color-gray-700); /* oklch(0.373 0.034 259.733) */ |
text-gray-800 | 颜色：var(--color-gray-800); /* oklch(0.278 0.033 256.848) */ |
text-gray-900 | 颜色：var(--color-gray-900); /* oklch(0.21 0.034 264.665) */ |
text-gray-950 | 颜色：var(--color-gray-950); /* oklch(0.13 0.028 261.692) */ |
text-zinc-50 | 颜色：var(--color-zinc-50); /* oklch(0.985 0 0) */ |
text-zinc-100 | 颜色：var(--color-zinc-100); /* oklch(0.967 0.001 286.375) */ |
text-zinc-200 | 颜色：var(--color-zinc-200); /* oklch(0.92 0.004 286.32) */ |
text-zinc-300 | 颜色：var(--color-zinc-300); /* oklch(0.871 0.006 286.286) */ |
text-zinc-400 | 颜色：var(--color-zinc-400); /* oklch(0.705 0.015 286.067) */ |
text-zinc-500 | 颜色：var(--color-zinc-500); /* oklch(0.552 0.016 285.938) */ |
text-zinc-600 | 颜色：var(--color-zinc-600); /* oklch(0.442 0.017 285.786) */ |
text-zinc-700 | 颜色：var(--color-zinc-700); /* oklch(0.37 0.013 285.805) */ |
text-zinc-800 | 颜色：var(--color-zinc-800); /* oklch(0.274 0.006 286.033) */ |
text-zinc-900 | 颜色：var(--color-zinc-900); /* oklch(0.21 0.006 285.885) */ |
text-zinc-950 | 颜色：var(--color-zinc-950); /* oklch(0.141 0.005 285.823) */ |
text-neutral-50 | 颜色：var(--color-neutral-50); /* oklch(0.985 0 0) */ |
text-neutral-100 | 颜色：var(--color-neutral-100); /* oklch(0.97 0 0) */ |
text-neutral-200 | 颜色：var(--color-neutral-200); /* oklch(0.922 0 0) */ |
text-neutral-300 | 颜色：var(--color-neutral-300); /* oklch(0.87 0 0) */ |
text-neutral-400 | 颜色：var(--color-neutral-400); /* oklch(0.708 0 0) */ |
text-neutral-500 | 颜色：var(--color-neutral-500); /* oklch(0.556 0 0) */ |
text-neutral-600 | 颜色：var(--color-neutral-600); /* oklch(0.439 0 0) */ |
text-neutral-700 | 颜色：var(--color-neutral-700); /* oklch(0.371 0 0) */ |
text-neutral-800 | 颜色：var(--color-neutral-800); /* oklch(0.269 0 0) */ |
text-neutral-900 | 颜色：var(--color-neutral-900); /* oklch(0.205 0 0) */ |
text-neutral-950 | 颜色：var(--color-neutral-950); /* oklch(0.145 0 0) */ |
text-stone-50 | 颜色：var(--color-stone-50); /* oklch(0.985 0.001 106.423) */ |
text-stone-100 | 颜色：var(--color-stone-100); /* oklch(0.97 0.001 106.424) */ |
text-stone-200 | 颜色：var(--color-stone-200); /* oklch(0.923 0.003 48.717) */ |
text-stone-300 | 颜色：var(--color-stone-300); /* oklch(0.869 0.005 56.366) */ |
text-stone-400 | 颜色：var(--color-stone-400); /* oklch(0.709 0.01 56.259) */ |
text-stone-500 | 颜色：var(--color-stone-500); /* oklch(0.553 0.013 58.071) */ |
text-stone-600 | 颜色：var(--color-stone-600); /* oklch(0.444 0.011 73.639) */ |
text-stone-700 | 颜色：var(--color-stone-700); /* oklch(0.374 0.01 67.558) */ |
text-stone-800 | 颜色：var(--color-stone-800); /* oklch(0.268 0.007 34.298) */ |
text-stone-900 | 颜色：var(--color-stone-900); /* oklch(0.216 0.006 56.043) */ |
text-stone-950 | 颜色：var(--color-stone-950); /* oklch(0.147 0.004 49.25) */ |
text-(<自定义属性>) | 颜色：var(<自定义属性>); |
text-[<值>] | 颜色：<值>; |
示例
基本示例
使用像 text-blue-600 和 text-sky-400 这样的工具类来控制元素的文本颜色
The quick brown fox jumps over the lazy dog. (快速的棕色狐狸跳过懒狗。)
<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>更改不透明度
使用颜色不透明度修饰符来控制元素的文本颜色不透明度
The quick brown fox jumps over the lazy dog. (快速的棕色狐狸跳过懒狗。)
The quick brown fox jumps over the lazy dog. (快速的棕色狐狸跳过懒狗。)
The quick brown fox jumps over the lazy dog. (快速的棕色狐狸跳过懒狗。)
The quick brown fox jumps over the lazy dog. (快速的棕色狐狸跳过懒狗。)
<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p><p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p><p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p><p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>使用自定义值
使用 text-[<值>] 语法 来设置文本颜色基于完全自定义的值
<p class="text-[#50d71e] ..."> <!-- ... --></p>对于 CSS 变量，你也可以使用 text-(<自定义属性>) 语法
<p class="text-(--my-color) ..."> <!-- ... --></p>这只是 text-[var(<自定义属性>)] 的简写，它会自动为你添加 var() 函数。
应用于悬停时
使用诸如hover:* 之类的变体为 color 工具类添加前缀，以便仅在该状态下应用该工具类。 color 工具类添加前缀，以便仅在该状态下应用该工具类。
悬停在文本上以查看预期行为
哦，我得赶紧上 互联网，我什么都晚了！
<p class="..."> Oh I gotta get on that <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>, I'm late on everything!</p>在变体文档中了解更多关于使用变体的信息。
响应式设计
使用诸如hover:* color 工具类 使用诸如 md: 的断点变体来仅在中等中等 屏幕尺寸及以上应用该工具类。
<p class="text-blue-600 md:text-green-600 ..."> <!-- ... --></p>在变体文档中了解更多关于使用变体的信息。
自定义你的主题
使用 --color-* 主题变量来自定义你的项目中的颜色 工具类
@theme { --color-regal-blue: #243c5a; }现在， text-regal-blue 工具类可以在你的标记中使用。
<p class="text-regal-blue"> <!-- ... --></p>在 主题文档.
