background-color

Ejemplos

Ejemplo básico

Usa utilidades como bg-white, bg-indigo-500 y bg-transparent para controlar el color de fondo de un elemento:

<button class="bg-blue-500 ...">Botón A</button>
<button class="bg-cyan-500 ...">Botón B</button>
<button class="bg-pink-500 ...">Botón C</button>

Cambiando la opacidad

Usa el modificador de opacidad de color para controlar la opacidad del color de fondo de un elemento:

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

Usando un valor personalizado

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

<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>

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

<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>

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

Aplicando en hover

Prefija una utilidad background-color con una variante como hover:* para aplicar la utilidad solo en ese estado:

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Guardar cambios</button>

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

Responsive design

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

<div class="bg-blue-500 md:bg-green-500 ...">
  <!-- ... -->
</div>

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 bg-regal-blue puede ser usada en tu marcado:

<div class="bg-regal-blue">
  <!-- ... -->
</div>

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