¿Cómo crear un pie de página fijo/adhesivo en la parte inferior usando Tailwind CSS?

En este artículo, vamos a crear un pie de página fijo/adhesivo en la parte inferior 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. Con Tailwind CSS podemos crear un diseño simplemente añadiendo clases.

Instalación:

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

Paso 1:
```
npm init -y
```
Paso 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: es un paso opcional que se utiliza para crear un archivo de configuración de Tailwind.
```
npx tailwindcss init 
```

Paso 5:

npx tailwindcss build styles.css -o output.css

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

<enlace href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”hoja de estilo”>

Ejemplo: En el siguiente ejemplo, se utilizan las siguientes clases.

La clase bg-{color} se usa para el color de fondo del elemento. De manera similar, p-{size} se usa para rellenar el elemento, text-{size} se usa para el tamaño de fuente del texto, text-center se usa para alinear el texto al centro, text-{color} es para la fuente color del texto, border-b-{width} es para el borde en la parte inferior, border-t es para el borde en la parte superior, border-{color} es para el color del borde del elemento, fixed es para una posición fija de los elementos, inset-x-0 son las propiedades derecha e izquierda del elemento, bottom-0 es para la propiedad inferior.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
          rel="stylesheet"/>
  </head>
  <body style="height: 1000px">
    <h1 style="color: green; 
               text-align: center">
        GeeksforGeeks
    </h1>
    <header class="text-2xl text-center 
                   text-green-800 border-b-2 
                   border-grey-500">
      Sticky footer using Tailwind CSS
    </header>
    <div>
      <p class="p-2 w-9/12">
            
      </p>
    </div>
    <footer
      class="bg-green-700
             text-3xl text-white text-center
             border-t-4 border-red-500
             fixed
             inset-x-0
             bottom-0
             p-4">
      This is sticky fixed Footer.
    </footer>
  </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

HTML

Deja una respuesta Cancelar la respuesta