SVG
填充
用于设置 SVG 元素填充的实用工具。
| 类 | 样式 |
|---|---|
fill-none | fill: none; |
fill-inherit | fill: inherit; |
fill-current | fill: currentColor; |
fill-transparent | fill: transparent; |
fill-black | fill: var(--color-black); /* #000 */ |
fill-white | fill: var(--color-white); /* #fff */ |
fill-red-50 | fill: var(--color-red-50); /* oklch(0.971 0.013 17.38) */ |
fill-red-100 | fill: var(--color-red-100); /* oklch(0.936 0.032 17.717) */ |
fill-red-200 | fill: var(--color-red-200); /* oklch(0.885 0.062 18.334) */ |
fill-red-300 | fill: var(--color-red-300); /* oklch(0.808 0.114 19.571) */ |
fill-red-400 | fill: var(--color-red-400); /* oklch(0.704 0.191 22.216) */ |
fill-red-500 | fill: var(--color-red-500); /* oklch(0.637 0.237 25.331) */ |
fill-red-600 | fill: var(--color-red-600); /* oklch(0.577 0.245 27.325) */ |
fill-red-700 | fill: var(--color-red-700); /* oklch(0.505 0.213 27.518) */ |
fill-red-800 | fill: var(--color-red-800); /* oklch(0.444 0.177 26.899) */ |
fill-red-900 | fill: var(--color-red-900); /* oklch(0.396 0.141 25.723) */ |
fill-red-950 | fill: var(--color-red-950); /* oklch(0.258 0.092 26.042) */ |
fill-orange-50 | fill: var(--color-orange-50); /* oklch(0.98 0.016 73.684) */ |
fill-orange-100 | fill: var(--color-orange-100); /* oklch(0.954 0.038 75.164) */ |
fill-orange-200 | fill: var(--color-orange-200); /* oklch(0.901 0.076 70.697) */ |
fill-orange-300 | fill: var(--color-orange-300); /* oklch(0.837 0.128 66.29) */ |
fill-orange-400 | fill: var(--color-orange-400); /* oklch(0.75 0.183 55.934) */ |
fill-orange-500 | fill: var(--color-orange-500); /* oklch(0.705 0.213 47.604) */ |
fill-orange-600 | fill: var(--color-orange-600); /* oklch(0.646 0.222 41.116) */ |
fill-orange-700 | fill: var(--color-orange-700); /* oklch(0.553 0.195 38.402) */ |
fill-orange-800 | fill: var(--color-orange-800); /* oklch(0.47 0.157 37.304) */ |
fill-orange-900 | fill: var(--color-orange-900); /* oklch(0.408 0.123 38.172) */ |
fill-orange-950 | 填充：var(--color-orange-950); /* oklch(0.266 0.079 36.259) */ |
填充-琥珀色-50 | 填充：var(--color-amber-50); /* oklch(0.987 0.022 95.277) */ |
填充-琥珀色-100 | 填充：var(--color-amber-100); /* oklch(0.962 0.059 95.617) */ |
填充-琥珀色-200 | 填充：var(--color-amber-200); /* oklch(0.924 0.12 95.746) */ |
填充-琥珀色-300 | 填充：var(--color-amber-300); /* oklch(0.879 0.169 91.605) */ |
填充-琥珀色-400 | 填充：var(--color-amber-400); /* oklch(0.828 0.189 84.429) */ |
填充-琥珀色-500 | 填充：var(--color-amber-500); /* oklch(0.769 0.188 70.08) */ |
填充-琥珀色-600 | 填充：var(--color-amber-600); /* oklch(0.666 0.179 58.318) */ |
填充-琥珀色-700 | 填充：var(--color-amber-700); /* oklch(0.555 0.163 48.998) */ |
填充-琥珀色-800 | 填充：var(--color-amber-800); /* oklch(0.473 0.137 46.201) */ |
填充-琥珀色-900 | 填充：var(--color-amber-900); /* oklch(0.414 0.112 45.904) */ |
填充-琥珀色-950 | 填充：var(--color-amber-950); /* oklch(0.279 0.077 45.635) */ |
填充-黄色-50 | 填充：var(--color-yellow-50); /* oklch(0.987 0.026 102.212) */ |
填充-黄色-100 | 填充：var(--color-yellow-100); /* oklch(0.973 0.071 103.193) */ |
填充-黄色-200 | 填充：var(--color-yellow-200); /* oklch(0.945 0.129 101.54) */ |
填充-黄色-300 | 填充：var(--color-yellow-300); /* oklch(0.905 0.182 98.111) */ |
填充-黄色-400 | 填充：var(--color-yellow-400); /* oklch(0.852 0.199 91.936) */ |
填充-黄色-500 | 填充：var(--color-yellow-500); /* oklch(0.795 0.184 86.047) */ |
填充-黄色-600 | 填充：var(--color-yellow-600); /* oklch(0.681 0.162 75.834) */ |
填充-黄色-700 | 填充：var(--color-yellow-700); /* oklch(0.554 0.135 66.442) */ |
填充-黄色-800 | 填充：var(--color-yellow-800); /* oklch(0.476 0.114 61.907) */ |
填充-黄色-900 | 填充：var(--color-yellow-900); /* oklch(0.421 0.095 57.708) */ |
填充-黄色-950 | 填充：var(--color-yellow-950); /* oklch(0.286 0.066 53.813) */ |
填充-酸橙色-50 | 填充：var(--color-lime-50); /* oklch(0.986 0.031 120.757) */ |
填充-酸橙色-100 | 填充：var(--color-lime-100); /* oklch(0.967 0.067 122.328) */ |
填充-酸橙色-200 | 填充：var(--color-lime-200); /* oklch(0.938 0.127 124.321) */ |
填充-酸橙色-300 | 填充：var(--color-lime-300); /* oklch(0.897 0.196 126.665) */ |
填充-酸橙色-400 | 填充：var(--color-lime-400); /* oklch(0.841 0.238 128.85) */ |
填充-酸橙色-500 | 填充：var(--color-lime-500); /* oklch(0.768 0.233 130.85) */ |
填充-酸橙色-600 | 填充：var(--color-lime-600); /* oklch(0.648 0.2 131.684) */ |
填充-酸橙色-700 | 填充：var(--color-lime-700); /* oklch(0.532 0.157 131.589) */ |
填充-酸橙色-800 | 填充：var(--color-lime-800); /* oklch(0.453 0.124 130.933) */ |
填充-酸橙色-900 | 填充：var(--color-lime-900); /* oklch(0.405 0.101 131.063) */ |
填充-酸橙色-950 | 填充：var(--color-lime-950); /* oklch(0.274 0.072 132.109) */ |
填充-绿色-50 | 填充：var(--color-green-50); /* oklch(0.982 0.018 155.826) */ |
填充-绿色-100 | 填充：var(--color-green-100); /* oklch(0.962 0.044 156.743) */ |
填充-绿色-200 | 填充：var(--color-green-200); /* oklch(0.925 0.084 155.995) */ |
填充-绿色-300 | 填充：var(--color-green-300); /* oklch(0.871 0.15 154.449) */ |
填充-绿色-400 | 填充：var(--color-green-400); /* oklch(0.792 0.209 151.711) */ |
填充-绿色-500 | 填充：var(--color-green-500); /* oklch(0.723 0.219 149.579) */ |
填充-绿色-600 | 填充：var(--color-green-600); /* oklch(0.627 0.194 149.214) */ |
填充-绿色-700 | 填充：var(--color-green-700); /* oklch(0.527 0.154 150.069) */ |
填充-绿色-800 | 填充：var(--color-green-800); /* oklch(0.448 0.119 151.328) */ |
填充-绿色-900 | 填充：var(--color-green-900); /* oklch(0.393 0.095 152.535) */ |
填充-绿色-950 | 填充：var(--color-green-950); /* oklch(0.266 0.065 152.934) */ |
填充-翠绿色-50 | 填充：var(--color-emerald-50); /* oklch(0.979 0.021 166.113) */ |
填充-翠绿色-100 | 填充：var(--color-emerald-100); /* oklch(0.95 0.052 163.051) */ |
填充-翠绿色-200 | 填充：var(--color-emerald-200); /* oklch(0.905 0.093 164.15) */ |
填充-翠绿色-300 | 填充：var(--color-emerald-300); /* oklch(0.845 0.143 164.978) */ |
填充-翠绿色-400 | 填充：var(--color-emerald-400); /* oklch(0.765 0.177 163.223) */ |
填充-翠绿色-500 | 填充：var(--color-emerald-500); /* oklch(0.696 0.17 162.48) */ |
填充-翠绿色-600 | 填充：var(--color-emerald-600); /* oklch(0.596 0.145 163.225) */ |
填充-翠绿色-700 | 填充：var(--color-emerald-700); /* oklch(0.508 0.118 165.612) */ |
填充-翠绿色-800 | 填充：var(--color-emerald-800); /* oklch(0.432 0.095 166.913) */ |
填充-翠绿色-900 | 填充：var(--color-emerald-900); /* oklch(0.378 0.077 168.94) */ |
填充-翠绿色-950 | 填充：var(--color-emerald-950); /* oklch(0.262 0.051 172.552) */ |
填充-青色-50 | 填充：var(--color-teal-50); /* oklch(0.984 0.014 180.72) */ |
填充-青色-100 | 填充：var(--color-teal-100); /* oklch(0.953 0.051 180.801) */ |
填充-青色-200 | 填充：var(--color-teal-200); /* oklch(0.91 0.096 180.426) */ |
填充-青色-300 | 填充：var(--color-teal-300); /* oklch(0.855 0.138 181.071) */ |
填充-青色-400 | 填充：var(--color-teal-400); /* oklch(0.777 0.152 181.912) */ |
填充-青色-500 | 填充：var(--color-teal-500); /* oklch(0.704 0.14 182.503) */ |
填充-青色-600 | 填充：var(--color-teal-600); /* oklch(0.6 0.118 184.704) */ |
填充-青色-700 | 填充：var(--color-teal-700); /* oklch(0.511 0.096 186.391) */ |
填充-青色-800 | 填充：var(--color-teal-800); /* oklch(0.437 0.078 188.216) */ |
填充-青色-900 | 填充：var(--color-teal-900); /* oklch(0.386 0.063 188.416) */ |
填充-青色-950 | 填充：var(--color-teal-950); /* oklch(0.277 0.046 192.524) */ |
填充-蓝绿色-50 | 填充：var(--color-cyan-50); /* oklch(0.984 0.019 200.873) */ |
填充-蓝绿色-100 | 填充：var(--color-cyan-100); /* oklch(0.956 0.045 203.388) */ |
填充-蓝绿色-200 | 填充：var(--color-cyan-200); /* oklch(0.917 0.08 205.041) */ |
填充-蓝绿色-300 | 填充：var(--color-cyan-300); /* oklch(0.865 0.127 207.078) */ |
填充-蓝绿色-400 | 填充：var(--color-cyan-400); /* oklch(0.789 0.154 211.53) */ |
填充-蓝绿色-500 | 填充：var(--color-cyan-500); /* oklch(0.715 0.143 215.221) */ |
填充-蓝绿色-600 | 填充: var(--color-cyan-600); /* oklch(0.609 0.126 221.723) */ |
填充-青色-700 | 填充: var(--color-cyan-700); /* oklch(0.52 0.105 223.128) */ |
填充-青色-800 | 填充: var(--color-cyan-800); /* oklch(0.45 0.085 224.283) */ |
填充-青色-900 | 填充: var(--color-cyan-900); /* oklch(0.398 0.07 227.392) */ |
填充-青色-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) */ |
填充-粉色-950 | 填充：var(--color-pink-950); /* oklch(0.284 0.109 3.907) */ |
填充-玫瑰色-50 | 填充：var(--color-rose-50); /* oklch(0.969 0.015 12.422) */ |
填充-玫瑰色-100 | 填充：var(--color-rose-100); /* oklch(0.941 0.03 12.58) */ |
填充-玫瑰色-200 | 填充：var(--color-rose-200); /* oklch(0.892 0.058 10.001) */ |
填充-玫瑰色-300 | 填充：var(--color-rose-300); /* oklch(0.81 0.117 11.638) */ |
填充-玫瑰色-400 | 填充：var(--color-rose-400); /* oklch(0.712 0.194 13.428) */ |
填充-玫瑰色-500 | 填充：var(--color-rose-500); /* oklch(0.645 0.246 16.439) */ |
填充-玫瑰色-600 | 填充：var(--color-rose-600); /* oklch(0.586 0.253 17.585) */ |
填充-玫瑰色-700 | 填充：var(--color-rose-700); /* oklch(0.514 0.222 16.935) */ |
填充-玫瑰色-800 | 填充：var(--color-rose-800); /* oklch(0.455 0.188 13.697) */ |
填充-玫瑰色-900 | 填充：var(--color-rose-900); /* oklch(0.41 0.159 10.272) */ |
填充-玫瑰色-950 | 填充：var(--color-rose-950); /* oklch(0.271 0.105 12.094) */ |
填充-板岩色-50 | 填充：var(--color-slate-50); /* oklch(0.984 0.003 247.858) */ |
填充-板岩色-100 | 填充：var(--color-slate-100); /* oklch(0.968 0.007 247.896) */ |
填充-板岩色-200 | 填充：var(--color-slate-200); /* oklch(0.929 0.013 255.508) */ |
填充-板岩色-300 | 填充：var(--color-slate-300); /* oklch(0.869 0.022 252.894) */ |
填充-板岩色-400 | 填充：var(--color-slate-400); /* oklch(0.704 0.04 256.788) */ |
填充-板岩色-500 | 填充：var(--color-slate-500); /* oklch(0.554 0.046 257.417) */ |
填充-板岩色-600 | 填充：var(--color-slate-600); /* oklch(0.446 0.043 257.281) */ |
填充-板岩色-700 | 填充：var(--color-slate-700); /* oklch(0.372 0.044 257.287) */ |
填充-板岩色-800 | 填充：var(--color-slate-800); /* oklch(0.279 0.041 260.031) */ |
填充-板岩色-900 | 填充：var(--color-slate-900); /* oklch(0.208 0.042 265.755) */ |
填充-板岩色-950 | 填充：var(--color-slate-950); /* oklch(0.129 0.042 264.695) */ |
填充-灰色-50 | 填充：var(--color-gray-50); /* oklch(0.985 0.002 247.839) */ |
填充-灰色-100 | 填充：var(--color-gray-100); /* oklch(0.967 0.003 264.542) */ |
填充-灰色-200 | 填充：var(--color-gray-200); /* oklch(0.928 0.006 264.531) */ |
填充-灰色-300 | 填充：var(--color-gray-300); /* oklch(0.872 0.01 258.338) */ |
填充-灰色-400 | 填充：var(--color-gray-400); /* oklch(0.707 0.022 261.325) */ |
填充-灰色-500 | 填充：var(--color-gray-500); /* oklch(0.551 0.027 264.364) */ |
填充-灰色-600 | 填充：var(--color-gray-600); /* oklch(0.446 0.03 256.802) */ |
填充-灰色-700 | 填充：var(--color-gray-700); /* oklch(0.373 0.034 259.733) */ |
填充-灰色-800 | 填充：var(--color-gray-800); /* oklch(0.278 0.033 256.848) */ |
填充-灰色-900 | 填充：var(--color-gray-900); /* oklch(0.21 0.034 264.665) */ |
填充-灰色-950 | 填充：var(--color-gray-950); /* oklch(0.13 0.028 261.692) */ |
填充-锌色-50 | 填充：var(--color-zinc-50); /* oklch(0.985 0 0) */ |
填充-锌色-100 | 填充：var(--color-zinc-100); /* oklch(0.967 0.001 286.375) */ |
填充-锌色-200 | 填充：var(--color-zinc-200); /* oklch(0.92 0.004 286.32) */ |
填充-锌色-300 | 填充：var(--color-zinc-300); /* oklch(0.871 0.006 286.286) */ |
填充-锌色-400 | 填充：var(--color-zinc-400); /* oklch(0.705 0.015 286.067) */ |
填充-锌色-500 | 填充：var(--color-zinc-500); /* oklch(0.552 0.016 285.938) */ |
填充-锌色-600 | 填充：var(--color-zinc-600); /* oklch(0.442 0.017 285.786) */ |
填充-锌色-700 | 填充：var(--color-zinc-700); /* oklch(0.37 0.013 285.805) */ |
填充-锌色-800 | 填充：var(--color-zinc-800); /* oklch(0.274 0.006 286.033) */ |
填充-锌色-900 | 填充：var(--color-zinc-900); /* oklch(0.21 0.006 285.885) */ |
填充-锌色-950 | 填充：var(--color-zinc-950); /* oklch(0.141 0.005 285.823) */ |
填充-中性色-50 | 填充：var(--color-neutral-50); /* oklch(0.985 0 0) */ |
填充-中性色-100 | 填充：var(--color-neutral-100); /* oklch(0.97 0 0) */ |
填充-中性色-200 | 填充：var(--color-neutral-200); /* oklch(0.922 0 0) */ |
填充-中性色-300 | 填充：var(--color-neutral-300); /* oklch(0.87 0 0) */ |
填充-中性色-400 | 填充：var(--color-neutral-400); /* oklch(0.708 0 0) */ |
填充-中性色-500 | 填充：var(--color-neutral-500); /* oklch(0.556 0 0) */ |
填充-中性色-600 | 填充：var(--color-neutral-600); /* oklch(0.439 0 0) */ |
填充-中性色-700 | 填充：var(--color-neutral-700); /* oklch(0.371 0 0) */ |
填充-中性色-800 | 填充：var(--color-neutral-800); /* oklch(0.269 0 0) */ |
填充-中性色-900 | 填充：var(--color-neutral-900); /* oklch(0.205 0 0) */ |
填充-中性色-950 | 填充：var(--color-neutral-950); /* oklch(0.145 0 0) */ |
填充-石色-50 | 填充：var(--color-stone-50); /* oklch(0.985 0.001 106.423) */ |
填充-石色-100 | 填充：var(--color-stone-100); /* oklch(0.97 0.001 106.424) */ |
填充-石色-200 | 填充：var(--color-stone-200); /* oklch(0.923 0.003 48.717) */ |
填充-石色-300 | fill: var(--color-stone-300); /* oklch(0.869 0.005 56.366) */ |
fill-stone-400 | fill: var(--color-stone-400); /* oklch(0.709 0.01 56.259) */ |
fill-stone-500 | fill: var(--color-stone-500); /* oklch(0.553 0.013 58.071) */ |
fill-stone-600 | fill: var(--color-stone-600); /* oklch(0.444 0.011 73.639) */ |
fill-stone-700 | fill: var(--color-stone-700); /* oklch(0.374 0.01 67.558) */ |
fill-stone-800 | fill: var(--color-stone-800); /* oklch(0.268 0.007 34.298) */ |
fill-stone-900 | fill: var(--color-stone-900); /* oklch(0.216 0.006 56.043) */ |
fill-stone-950 | fill: var(--color-stone-950); /* oklch(0.147 0.004 49.25) */ |
fill-(<自定义属性>) | fill: var(<自定义属性>); |
fill-[<颜色>] | fill: <颜色>; |
示例
基本示例
使用类似 fill-indigo-500 和 fill-lime-600 的实用工具来更改 SVG 的填充颜色
<svg class="fill-blue-500 ..."> <!-- ... --></svg>这对于样式化诸如 Heroicons 等图标集非常有用。
使用当前颜色
使用 fill-current 实用工具将填充颜色设置为当前文本颜色
悬停在按钮上以查看填充颜色变化
<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ..."> <svg class="size-5 fill-current ..."> <!-- ... --> </svg> Check for updates</button>使用自定义值
使用 填充-[<值>] 语法 来设置填充颜色基于完全自定义的值
<svg class="fill-[#243c5a] ..."> <!-- ... --></svg>对于 CSS 变量，您也可以使用 填充-(<自定义属性>) 语法
<svg class="fill-(--my-fill-color) ..."> <!-- ... --></svg>这只是 填充-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。
响应式设计
前缀一个 fill 实用工具 带有像 md: 这样的断点变体，以仅在中等 屏幕尺寸及以上应用该实用工具
<svg class="fill-cyan-500 md:fill-cyan-700 ..."> <!-- ... --></svg>在变体文档中了解有关使用变体的更多信息。
自定义您的主题
使用 --color-* 主题变量来自定义项目中的颜色 实用工具
@theme { --color-regal-blue: #243c5a; }现在， 填充-regal-blue 实用工具可以在您的标记中使用
<svg class="fill-regal-blue"> <!-- ... --></svg>在 主题文档.
