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