Fill

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors";

export const title = "fill"; export const description = "Utilities for styling the fill of SVG elements.";

[fill-${name}, fill: var(--color-${name}); /* ${value} */]), ["fill-()", "fill: var();"], ["fill-[]", "fill: ;"], ]} />

Examples¶

Basic example¶

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

{

}

<!-- [!code classes:fill-blue-500] -->
<svg class="fill-blue-500 ...">
  <!-- ... -->
</svg>

This can be useful for styling icon sets like Heroicons.

Using the current color¶

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

{

}

<!-- [!code classes: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>

Fill

Examples¶

Basic example¶

Using the current color¶

Using a custom value¶

Responsive design¶

Customizing your theme¶