fill

Ejemplos

Ejemplo básico

Usa utilidades como fill-indigo-500 y fill-lime-600 para cambiar el color de relleno de un SVG:

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

Esto puede ser útil para estilizar conjuntos de iconos como Heroicons.

Usando el color actual

Usa la utilidad fill-current para establecer el color de relleno al color de texto actual:

<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...">
  <svg class="size-5 fill-current ...">
    <!-- ... -->
  </svg>
  Buscar actualizaciones
</button>

Usando un valor personalizado

Usa la sintaxis fill-[<value>] para establecer el fill color basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis fill-(<custom-property>) :

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

Esto es solo un atajo para fill-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad fill con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --color-* para personalizar las utilidades color en tu proyecto:

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

Ahora la utilidad fill-regal-blue puede ser usada en tu marcado:

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

Aprende más sobre la personalización de tu tema en la documentación del tema.