fill
En esta página
| Clase | Propiedades CSS |
|---|---|
fill-none |
fill: none; |
fill-inherit |
fill: inherit; |
fill-current |
fill: currentColor; |
fill-transparent |
fill: transparent; |
fill-(<custom-property>) |
fill: var(<custom-property>); |
fill-[<color>] |
fill: <color>; |
fill-<value> |
fill: var(--color-<value>); /* <value> */ |
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>