Color de fondo CSS de Tailwind

Esta clase acepta más de un valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS background-color . Esta clase se utiliza para especificar el color de fondo de un elemento. El fondo cubre el tamaño total del elemento con relleno y borde pero excluyendo el margen. Hace que el texto sea tan fácil de leer para el usuario.

Clases de color de fondo:

background-transparent: El color de fondo será transparente.
background-current: el color del fondo dependerá del color del elemento principal.
background-black: El color de fondo será negro.
background-white: El color de fondo será blanco.
background-gray-50: El color de fondo será gris.
background-red-50: El color de fondo será rojo.
background-blue-50: El color de fondo será azul.
background-indigo-50: El color de fondo será índigo.
background-purple-50: El color de fondo será morado.
background-green-50: El color de fondo será verde.
background-yellow-50: El color de fondo será amarillo.
background-pink-50: El color de fondo será rosa.

Nota: Los valores del color se pueden cambiar de acuerdo con su necesidad de 50 a 900, el intervalo debe ser 100, después de 100.

Sintaxis:

<element class="background-{color}">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Background Color Class</b> 
    <div class="mx-14 bg-green-200 grid grid-rows-4
                grid-flow-col text-justify p-4">
          
       <p class="bg-transparent p-2">
         A Computer Science Portal for Geeks
       </p>
  
  
       <p class="bg-current text-red-600 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-white p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-black text-white p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-gray-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-red-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
  
       <p class="bg-indigo-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-blue-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-green-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-yellow-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-pink-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-purple-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
    </div>
</body> 
  
</html>

Producción:

Clase de color de fondo

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta