¿Cómo aplicar una imagen de fondo con degradado lineal usando Tailwind CSS?

En este artículo veremos cómo aplicar imágenes de fondo con un degradado lineal usando Tailwind CSS

Tailwind CSS es un marco CSS altamente personalizable que prioriza la utilidad desde el cual podemos usar clases de utilidad para construir cualquier diseño. Para aplicar imágenes de fondo con degradados lineales usamos la utilidad de imagen de fondo de Tailwind CSS. Es la alternativa a la propiedad background-image de CSS . Para trabajar con Tailwind CSS, debemos agregar el archivo precompilado Tailwind CSS a nuestra carpeta de proyecto. 

Instalación:

Método 1: instalar Tailwind a través de npm

Step 1:npm init -y
Step 2:npm install tailwindcss

Paso 3: ahora tenemos que agregar Tailwind a nuestro CSS usando la directiva @tailwind para inyectar la base, los componentes y los estilos de utilidad de Tailwind en nuestro archivo CSS. 

@tailwind base;  
@tailwind components;  
@tailwind utilities;

Paso 4: 

npx tailwindcss init
(It is an optional step that is used to create a Tailwind config file.)

Paso 5: 

npx tailwindcss build styles.css -o output.css  

Método 2: usar el archivo CSS de Tailwind a través de CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Ejemplo: en este ejemplo, hemos utilizado la clase bg-gradient-to-br para establecer el degradado lineal en la parte inferior derecha.

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
     "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
          rel="stylesheet">
</head>
<body>
    <div class="font-bold m-3">
      <h1 class="text-3xl text-green-800 my-4" >
        GeeksforGeeks
      </h1>
      <p class=" text-xl text-black-700 my-3">
        Tailwind CSS Background Image Class
      </p>
  
    </div>
    <div class=" m-4 w-96 h-52 bg-gradient-to-br
                    from-blue-400 via-green-500 
                    to-red-500">
    </div>
</body>
</html>

Producción:

Ejemplo: En este ejemplo, hemos utilizado todas las clases de imágenes de fondo, es decir, . bg-gradiente-a-{dirección} .

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
    GeeksforGeeks
    </h1>
    <b>Tailwind CSS Background Image Class</b>
    <div class="m-4 grid grid-cols-3 gap-2">
    <div class="h-12 w-34 bg-gradient-to-r rounded-lg 
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-tr rounded-lg 
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-br rounded-lg 
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-b rounded-lg 
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-bl rounded-lg  
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-tl rounded-lg 
                from-blue-400 via-green-500 to-red-500">
    </div>
    <div class="h-12 w-34 bg-gradient-to-l rounded-lg  
                from-blue-400 via-green-500 to-red-500">
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *