SVG

fill

用于设置 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) */

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 fill-indigo-500fill-lime-600 等工具更改 SVG 的填充颜色:

¥Use utilities like fill-indigo-500 and fill-lime-600 to change the fill color of an SVG:

<svg class="fill-blue-500 ...">
<!-- ... -->
</svg>

这对于像 英雄偶像 这样的图标集样式很有用。

¥This can be useful for styling icon sets like Heroicons.

使用当前颜色(Using the current color)

¥Using the current color

使用 fill-current 工具将填充颜色设置为当前文本颜色:

¥Use the fill-current utility to set the fill color to the current text color:

悬停在按钮上以查看填充颜色变化

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

使用自定义值(Using a custom value)

¥Using a custom value

使用 fill-[<value>] 语法 根据完全自定义的值设置 fill color

<svg class="fill-[#243c5a] ...">
<!-- ... -->
</svg>

对于 CSS 变量,还可以使用 fill-(<custom-property>) 语法:

<svg class="fill-(--my-fill-color) ...">
<!-- ... -->
</svg>

这只是简写,用于 fill-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

fill 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

<svg class="fill-cyan-500 md:fill-cyan-700 ...">
<!-- ... -->
</svg>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具:

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

现在 fill-regal-blue 工具可用于你的标记:

<svg class="fill-regal-blue">
<!-- ... -->
</svg>

在此详细了解如何自定义主题: 主题文档

TailwindCSS v4.0 中文网 - 粤ICP备13048890号