Crea un banner

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:31

Crea un banner

Curso de Tailwind CSS 1

Clase 21 de 29

Clase 21 / 29

Recursos

Diseñar un banner atractivo es uno de los primeros pasos para dar forma visual a un sitio web. Aquí se explica cómo lograrlo usando Tailwind CSS, imágenes de fondo y clases utilitarias que permiten un resultado profesional y adaptable a cualquier dispositivo.

¿Cómo estructurar el HTML del banner?

Antes de aplicar estilos, es fundamental definir la estructura semántica del contenido. Se utiliza la etiqueta <main> para indicar al navegador que se trata del contenido principal del sitio [0:10]. Dentro de ella, se crea un <div> que servirá como contenedor del banner.

Para la imagen, en lugar de usar una etiqueta <img>, se aplica la propiedad background image directamente en el estilo del <div>. Esto permite mayor control sobre cómo se muestra la imagen, especialmente en diseños responsivos.

html

La imagen se obtiene de Unsplash [0:30], un recurso gratuito de fotografías de alta calidad. Se copia la dirección de la imagen seleccionada y se pega dentro de la función url() del estilo inline.

¿Qué clases de Tailwind controlan el fondo y la altura?

Al insertar la imagen, inicialmente no se ve correctamente porque el <div> no tiene altura definida. La clase h-64 asigna una altura fija al contenedor [1:00], haciendo visible parte de la imagen.

¿Cuál es la diferencia entre bg-cover y bg-contain?

bg-cover: escala la imagen para cubrir todo el contenedor, recortando lo que sobra. Es ideal cuando se quiere llenar el espacio sin dejar huecos [1:10].
bg-contain: muestra la imagen completa sin recortarla, pero puede generar repeticiones si el contenedor es más grande que la imagen [1:20].

Para evitar la repetición con contain, se puede usar bg-no-repeat, aunque en este caso se opta por bg-cover porque ofrece un resultado más limpio.

¿Cómo posicionar la parte visible de la imagen?

Con bg-center la imagen se centra dentro del contenedor [1:40]. Otra opción es bg-bottom, que muestra la parte inferior de la imagen. En este ejemplo se elige bg-bottom porque la composición visual resulta más atractiva [1:50].

¿Cómo personalizar la altura en tailwind.config?

Las clases de altura en Tailwind llegan hasta h-64 por defecto, lo que equivale a 16 rem. Cada unidad de spacing corresponde a 0.25 rem [2:20]. Para crear alturas mayores, se extiende la configuración en el archivo tailwind.config.js.

javascript // tailwind.config.js module.exports = { theme: { extend: { height: { '80': '20rem', '100': '25rem', } } } }

Aquí se agregan las clases h-80 (80 × 0.25 = 20 rem) y h-100 (100 × 0.25 = 25 rem) [3:30]. Después de guardar, es necesario que el procesador de CSS esté activo con npm run watch para que los cambios surtan efecto [2:50].

¿Cómo hacer el banner responsivo con breakpoints?

El diseño responsivo en Tailwind se logra usando prefijos de breakpoint como md: para pantallas medianas en adelante [3:50]. La estrategia es:

En móvil: usar h-56 para que la imagen no ocupe demasiado espacio vertical [3:55].
En escritorio: aplicar md:h-100 junto con bg-center para aprovechar mejor el área visible [4:10].

html

Esta combinación garantiza que el banner se adapte de forma elegante tanto en teléfonos como en pantallas grandes.

El flujo completo va desde la estructura semántica con <main>, pasando por la selección de imagen en Unsplash, hasta la personalización de alturas y el uso de breakpoints responsivos. ¿Has probado extender otras propiedades en tu configuración de Tailwind? Comparte tu experiencia.