Color de fondo de Tailwind CSS

En Tailwind CSS,el color de fondo(Background Color) es una de las clases de utilidad más utilizadas; te permite configurar rápidamente el color de fondo de un elemento.

Tailwind ofrece múltiples opciones de color y diferentes tonalidades, lo que garantiza que puedas aplicar el estilo deseado de manera flexible.

Sintaxis básica del color de fondo：

<div class="bg-{color}">
  <!-- 内容 -->
</div>

Clases comunes de color de fondo：

Nombre de clase Descripción Ejemplo
bg-{color} Establecer el color de fondo bg-red-500，bg-blue-200
bg-transparent Establecer un color de fondo transparente bg-transparent
bg-current Establecer el color de fondo como el color de texto actual (frecuentemente usado para fondos de iconos) bg-current
bg-white Establecer el color de fondo en blanco bg-white
bg-black Establecer el color de fondo en negro bg-black
bg-gray-{n} Establecer el color de fondo en gris,{n}es la tonalidad del gris (de 50 a 900) bg-gray-100, bg-gray-700

Degradado de color de fondo (Gradient)：

Tailwind CSS admite degradados lineales, radiales, etc. para fondos. Puedes usarbg-gradient-to-{direction}para especificar la dirección del degradado, y usarfrom-{color}、to-{color}para establecer el color inicial y final del degradado.

Nombre de clase Descripción Ejemplo
bg-gradient-to-{direction} Establecer la dirección del fondo degradado,directionpuede sert、r、b、l、tr、tl、br、blesperar bg-gradient-to-r(degradado de izquierda a derecha)
from-{color} Establecer el color inicial del fondo degradado from-blue-500
to-{color} Establecer el color final del fondo degradado to-green-300
via-{color} Establecer el color intermedio del degradado (opcional) via-purple-400

Ejemplo

<div class="bg-gradient-to-r from-blue-500 to-green-300 p-10 text-white">
Fondo de degradado de azul a verde
</div>

Opacidad del color de fondo（Opacity）：

Tailwind también proporciona clases de utilidad para controlar la opacidad de fondo; usabg-opacity-{value}para establecer el valor de opacidad,{value}un entero de 0 a 100 representa el porcentaje de opacidad.

Nombre de clase Descripción Ejemplo
bg-opacity-{n} Establecer la opacidad del color de fondo bg-opacity-50
bg-opacity-0 Establecer el color de fondo completamente transparente bg-opacity-0
bg-opacity-100 Establecer el color de fondo completamente opaco bg-opacity-100

Ejemplo

<div class="bg-blue-500 bg-opacity-50 p-10 text-white">
Fondo azul semitransparente
</div>

Uso de colores de fondo personalizados en la configuración de Tailwind：

Puedestailwind.config.jspersonalizar los colores de fondo en el archivo de configuración. A través detheme.extendde la seccióncolorsbajo la propiedad, definir colores, puedes extender el conjunto de colores predeterminado.

Ejemplo

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1D4ED8',
        'custom-gray': '#4B5563',
      }
    }
  }
}

Usar colores de fondo personalizados en HTML:

Ejemplo

<div class="bg-custom-blue p-10 text-white">
Usar un fondo azul personalizado
</div>

Ejemplo completo

Ejemplo

<!-- Ejemplo de color de fondo -->
<div class="bg-blue-500 text-white p-6 mb-6">
    <h1 class="text-xl">Fondo azul</h1>
    <p>Este es un contenedor con fondo azul y texto en color blanco.</p>
</div>

<!-- Ejemplo de fondo degradado -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-6 mb-6">
    <h1 class="text-xl">Fondo degradado</h1>
    <p>Este es un fondo de degradado lineal, de púrpura a rosa y luego a rojo.</p>
</div>

<!-- Ejemplo de opacidad de fondo -->
<div class="bg-green-500 bg-opacity-50 text-white p-6">
    <h1 class="text-xl">Fondo con transparencia</h1>
    <p>Este es un contenedor con un fondo verde semitransparente.</p>
</div>

Pruébalo »

Análisis:

Color de fondo básico：

  • bg-blue-500: establece el color de fondo en azul.
  • text-white: establece el color del texto en blanco.

Fondo degradado：

  • bg-gradient-to-r: establece la dirección del fondo degradado de izquierda a derecha.
  • from-purple-500: establece el color inicial del degradado en púrpura.
  • to-red-500: establece el color final del degradado en rojo.

Opacidad de fondo：

  • bg-opacity-50: establece la opacidad del color de fondo en 50% (semitransparente).
Otras extensiones