En este artículo, aprenderemos a aplicar color de fondo usando Tailwind CSS.
Acercarse:
Podemos establecer un color de fondo de página completa simplemente cambiando la altura de la pantalla de un cuerpo HTML. En Tailwind CSS, usamos una alternativa de la propiedad CSS background-color que se representa como background-color-opacity (p. ej.: bg-blue-200 ) y se usa 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.
Nota: Para la altura de la pantalla, puede usar ‘h-screen’ para hacer que un elemento abarque toda la altura del puerto de visualización.
Sintaxis:
<body class="h-screen bg-gradient-to-b from-green-200 to-green-500" >
Ejemplo 1: El siguiente ejemplo establece el color de fondo completo de un documento HTML con 3 d iv s.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet" />
<style>
h2 {
text-align: center;
}
</style>
</head>
<body class="h-screen bg-gradient-to-b
from-green-200 to-green-500">
<h2 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h2>
<center>
<b>Tailwind CSS background color</b>
</center>
<br />
<div class="mx-2 grid grid-cols-3 gap-2
bg-blue-800 rounded-lg">
<div class="p-6 bg-green-600 border-dashed
border-4 border-green-300">
Dashed border
</div>
<div class="p-6 bg-green-600 border-double
border-4 border-green-300">
Double border
</div>
<div class="p-6 bg-green-600 border-dotted
border-4 border-green-300">
Dotted border
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: si evita usar utilidades para configurar la altura de un elemento como h-screen como en el código anterior, obtendrá el mismo resultado, simplemente usando background-color-opacity (bg-blue-200) en el HTML cuerpo.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> </head> <body class="bg-blue-200 text-center"> <h2 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h2> <b>Tailwind CSS Background Color Class</b> <p> Using Tailwind CSS background color is fun </p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA