填充

示例

基本示例

使用类似 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>

使用自定义值

使用 填充-[<value>] 语法 来设置填充颜色基于完全自定义的值

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

对于 CSS 变量，你也可以使用 填充-(<custom-property>) 语法

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

这只是一个简写形式，用于 填充-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计

前缀一个 fill 工具类 使用断点变体（例如 md:）来仅在中等中等 屏幕尺寸及以上时应用该工具类

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

在变体文档中了解更多关于使用变体的信息。

自定义你的主题

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

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

现在， 填充-regal-blue 工具类可以在你的标记中使用

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

在主题文档中了解更多关于自定义主题的信息。 主题文档.