填充

示例

基本示例

使用诸如 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>
  检查更新
</button>

使用自定义值

Use the fill-[<value>] syntax to set the 填充颜色 based on a completely custom value:

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

For CSS variables, you can also use the fill-(<custom-property>) syntax:

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

This is just a shorthand for fill-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a fill utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the fill-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.