Vamos a maquetar un blog con TailwindCSS
Lo prometido es deuda y como dije en el post anterior, vamos a aprender a maquetar un blog con TailwindCSS 💪. Si no sabes como configurar un proyecto para utilizar TailwindCSS te recomiendo que sigas este enlace en el que explico como hacerlo 😎.
Recomendaciones
Si utilizas VSCode te recomiendo que instales el plugin Tailwind CSS IntelliSense, este plugin te ayuda con el autocompletado, resaltado de sintáxis y linting, lo que nos facilitará mucho el trabajo y evitarnos estar cada dos por tres mirando la documentación en cuanto nos familiaricemos con este Framework.
Cómo funciona TailwindCSS
TailwindCSS provee una serie de clases que podremos implementar en nuestro código HTML, ya sea directamente en las etiquetas HTML o contenidas dentro de otra clase en un archivo específico para ello.
Vamos a maquetar un blog
Antes de nada os dejo el resultado en mi GitHub para que le echéis un vistazo, espero que os guste el resultado 😁.
Lo primero que debemos hacer es crear la base en nuestro archivo index.html, para ello añadimos el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi blog</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>
<body class="bg-gray-100">
</body>
</html>
Como podéis ver, estamos importando el archivo public/css/styles.css que es donde se guardará todo el CSS que se genere a partir de TailwindCSS y también he importado fontawesome para que tengamos iconos chulos 😎.
También hemos añadido nuestra primera clase de TailwindCSS llamada bg-gray-100. bg correspondería a background-color, luego el color que queremos utilizar, en nuestro caso gris, además tiene muchos más definidos como red, blue, green, etc y por el último el nivel de opacidad que va de 100 en 100 desde el 100 para el más claro y 900 para el nivel más oscuro de gris. Para dejarlo más claro, si quisiéramos utilizar el rojo y con un nivel medio de opacidad escribiríamos bg-red-500.
Una vez hecho esto, lo que hago es abrir dos terminales en la consola de VSCode apuntando al directorio raíz de este proyecto, en una lanzo npm run dev que es el comando que creamos en el anterior post para que los cambios que realicemos para TailwindCSS se reflejen en nuestro archivo public/css/styles.css y el otro comando que uso es live-server public. live-server es un paquete de npm que lo que hace es abrir el proyecto en el navegador simulando ser un servidor. Además, cada vez que realizas un cambio en el código se recarga automáticamente la página lo que nos facilitará el trabajo 👷♂️.
Cabecera
Bien bien, ahora que ya tenemos la base es hora de meternos de lleno con el blog, para ello lo primero que vamos a hacer es crear nuestra cabecera y barra de navegación que será totalmente responsive (como el resto del proyecto 😉), para ello añadimos el siguiente código justo después de la apertura de la etiqueta body.
<header class="bg-gray-900 shadow-md">
<nav class="flex justify-between items-center text-gray-200 px-4 shadow-md sm:py-4 sm:justify-around">
<div class="sm:hidden text-2xl">≡</div>
<ul class="hidden sm:flex justify-between w-64">
<li>
<a href="http://">Inicio</a>
</li>
<li>
<a href="http://">Categorías</a>
</li>
<li>
<a href="http://">Acerca de mi</a>
</li>
</ul>
<ul class="flex justify-between w-20">
<li>
<a href="http://">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="http://">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="http://">
<i class="fas fa-rss"></i>
</a>
</li>
</ul>
</nav>
<div class="bg-white text-center">
<div class="text-6xl font-bold">
MiBlog
</div>
<h1 class="text-gray-700 text-xl pb-4">Maquetando con TailwindCSS</h1>
</div>
</header>
Puede parecer un poco lio pero nada más lejos de la realidad. Para que lo veáis más fácil voy a explicar todas las nuevas clases que aparecen.
En la etiqueta header estamos usando la clase shadow-md, esta clase generará un sombreado en nuestra etiqueta y md indica que será de tamaño medio. La clase shadow tiene tamaños que van desde xs para un sombreado muy pequeño hasta 2xl para un sombreado de gran tamaño. Para ver todos los tamaños de sombreado, podéis consultarlo aquí.
La etiqueta nav utiliza la clase flex que corresponde a display:flex, también justify-between que se utiliza en flex para separar los elementos conteniendo todo el espacio del div entre ellos e items-center para centrarlo de forma vertical. También utilizamos la clase text-gray-200 que es prácticamente igual a la clase bg pero en este caso el cambio se aplica al color del texto en vez de al fondo.
La clase px-4 modifica el padding, la x indica que es para el padding izquierdo y derecho y el número 4 correspondería a 1rem en este caso. Para el padding cada unidad sería 0.25rem, por lo tanto px-2 sería 0.5rem, px-3 0.75rem y así sucesivamente hasta 64 (aunque no está para todos los números de forma consecutiva hasta el 64 que sería el máximo). Si queremos aplicar un padding igual para todos los lados lo haríamos de esta forma, p-4. Si lo queremos hacer para arriba y abajo sería py-4 y si solo queremos hacerlo para un lado sería pl4 para izquierda, pr-4 para derecha, pt-4 para arriba y pb-4 para abajo. En el caso de margin funciona exactamente igual pero sustituyendo la p por la m.
Por último tenemos sm:py-4 y sm:justify-around. Lo que nos indica sm es que estas clases solo se apliquen cuando el ancho de la pantalla tenga un mínimo de 640 píxeles. Esto nos ayudará a crear nuestro blog totalmente responsive. También os dejo todos los tamaños disponibles en TailwindCSS para que los apliquéis según lo necesitéis:
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }
Ya dentro de la etiqueta nav tenemos un div que contiene el código HTML que corresponde al carácter para el icono del menú de hamburguesa. En él tenemos la clase sm:hidden que corresponde a display:none cuando la pantalla sea mayor a un tamaño de 640 píxeles y la clase text-2xl. Esta clase corresponde al tamaño que le queremos dar al texto, en este caso, 1.5rem. Para ver todos los tamaños podéis hacerlo pinchando aquí.
La siguiente etiqueta que tenemos es la etiqueta ul que por defecto estará oculta y solo se mostrará cuando la pantalla sea mayor a 640 píxeles sustituyendo al div anterior. Aquí también estamos utilizando la clase w-64. Esta corresponde al ancho de pantalla y en este caso le queremos dar un ancho de 16rem. También se puede utilizar de más formas la clase w como por ejemplo con w-full para que ocupe toda el ancho de pantalla, w-1/2 para ocupar el 50% y unos cuantos tamaños más. Para más info pinchad aquí.
Ahora imaginad que queremos darle estilos al hover de la etiqueta a dentro de cada etiqueta li, para ello tendríamos que añadir las clases en cada etiqueta y si quisiéramos hacer un cambio tendríamos que hacerlo en cada pero eso es un rollazo así que aquí viene la solución 😅.
Abrimos el archivo css/tailwind.css y ahí podemos añadir las clases que necesitemos. Cuando el watcher que activamos al principio del tutorial detecte en un cambio, este se reflejará en nuestro archivo public/css/styles.css.
Dentro del archivo css/tailiwind.css añadimos el siguiente código:
@tailwind base;
@tailwind components;
@tailwind utilities;
header > nav > ul > li > a:hover {
@apply text-blue-300;
}
Aquí estamos indicando la etiqueta que queremos modificar y utilizaremos @apply para poder utilizar las clases de TailwindCSS. En nuestro caso modificamos el color del texto cuando el cursor esté encima de nuestro link.
Ahora que ya hemos explicado todas las nuevas clases de la etiqueta de navegación, ¡vamos a por la cabecera!
Para la cabecera usamos bg-white para darle un fondo de color blanco y text-center que corresponde a text-align: center y centrará todo el contenido de este.
Dentro del div principal tenemos otro div que contiene el nombre del blog y al que le damos el máximo tamaño de texto con text-6xl y utilizamos la clase font-bold para que el texto se vea en negrita y que corresponde a font-weight: 700. Para ver todos los tamaños podéis hacerlo pinchando aquí.
En la etiqueta h1 no tenemos ninguna clase nueva por explicar así que nos la saltamos 😅.
Cuerpo de la web
Ahora nos toca meternos de lleno con el contenido de la web. Como podéis ver en el proyecto ya maquetado, he creado dos partes, una donde se muestran todos los artículos y otra para mostrar los post más populares. Según el tamaño de la pantalla, esta sección se mostrará debajo de los artículos o en su lateral derecho. Para construir esta parte, he usado el siguiente código:
<div class="mt-10 md:flex justify-center">
<div class="max-w-full flex-row justify-center mb-8 md:mr-2">
<article class="text-center bg-white shadow-md mb-4">
<a class="block mb-4" href="http://">
<img class="w-auto mb-4 inline" src="images/post3.jpg" alt="">
<h2 class="text-2xl font-bold">Título del post número tres</h2>
<time class="text-gray-500" datetime="2020-09-05">Hace dos días</time>
</a>
<div class="footer-article flex w-full">
<a href="http://">
<i class="fas fa-heart"></i> 58
</a>
<a href="http://">
<i class="fas fa-comments"></i> 11
</a>
<a href="http://">
<i class="fas fa-eye"></i> 120
</a>
</div>
</article>
<article class="text-center bg-white shadow-md mb-4">
<a class="block mb-4" href="http://">
<img class="w-auto mb-4 inline" src="images/post2.jpg" alt="">
<h2 class="text-2xl font-bold">Título del post número dos</h2>
<time class="text-gray-500" datetime="2020-09-05">Hace dos días</time>
</a>
<div class="footer-article flex w-full">
<a href="http://">
<i class="fas fa-heart"></i> 58
</a>
<a href="http://">
<i class="fas fa-comments"></i> 11
</a>
<a href="http://">
<i class="fas fa-eye"></i> 120
</a>
</div>
</article>
<article class="text-center bg-white shadow-md mb-4">
<a class="block mb-4" href="http://">
<img class="w-auto mb-4 inline" src="images/post1.jpg" alt="">
<h2 class="text-2xl font-bold">Título del post número uno</h2>
<time class="text-gray-500" datetime="2020-09-05">Hace dos días</time>
</a>
<div class="footer-article flex w-full">
<a href="http://">
<i class="fas fa-heart"></i> 58
</a>
<a href="http://">
<i class="fas fa-comments"></i> 11
</a>
<a href="http://">
<i class="fas fa-eye"></i> 120
</a>
</div>
</article>
</div>
<section>
<div class="popular-posts text-center bg-white border-gray-300 mb-4 pb-4 md:w-64 shadow-md">
<div>
<h3 class="font-bold text-2xl text-gray-900 border-b-2 border-gray-100 p-2 mb-2">Más leídos</h3>
</div>
<div>
<ul>
<li>
<a href="http://">Título del post 1</a>
</li>
<li>
<a href="http://">Título del post 2</a>
</li>
<li>
<a href="http://">Título del post 3</a>
</li>
</ul>
</div>
</div>
</section>
</div>
Para el div que contiene todo el cuerpo de la página, he añadido un margen en el top con mt-10 para separarlo de la cabecera. Para las pantallas mayores a un tamaño de 768 píxeles, cambiamos el display para que sea flex y se muestren la sección al lado del artículo y justify-center para que estén centrados en la página.
En el div que contiene todos los artículos, hemos añadido la clase max-w-full que se corresponde a max-width:100%, flex-row para tener un artículo debajo del otro, justify-center para tener centrados los artículos, mb-8 para un margen al final del div de 2 rem y cuando la pantalla sea mayor a 768 píxeles un margen a la derecha para separarlo de las secciones.
En la parte de los artículos ya están explicadas todas las clases que he añadido hasta ahora a excepción del pie del artículo donde he añadido las siguientes clases dentro del archivo css/tailwind.css.
.footer-article > a {
@apply flex-1 bg-gray-300 inline-block px-4 py-2;
}
.footer-article > a:not(:last-child) {
@apply border-r-2 border-white;
}
.footer-article > a:hover {
@apply bg-gray-500
}
Aquí lo que he hecho es darle formato a los links, en el primero he añadido flex-1 para que todos los links tengan el mismo tamaño y también le he puesto un display: inline-block con la clase inline-block.
También añadí un borde lateral derecho con border-r-2 y de color blanco con la clase border-white para dar el efecto de separación entre un botón y otro. Esto se aplica a todos los botones a excepción del último gracias a la pseudo clase :not(:last-child).
Para la sección con los posts más leídos ya he explicado todas las clases que contiene así que no me voy a explayar más en esta parte. Eso si, en este caso también añadí unas clases dentro de css/tailwind.css.
.popular-posts > div > ul > li {
@apply p-1;
}
.popular-posts > div > ul > li > a {
@apply text-blue-400 underline text-lg;
}
.popular-posts > div > ul > li > a:hover {
@apply text-blue-500;
}
Aquí, la única nueva clase que utilizo es la clase underline que añade un subrayado al texto, correspondería a text-decoration: underline.
Pie de página
Para el pie de página, he creado una lista con los típicos links y la fecha de creación como veréis en el código a continuación:
<footer class="text-center text-white bg-teal-900 py-4">
<ul class="md:flex justify-center">
<li><a href="http://">Hola</a></li>
<li><a href="http://">Privacidad</a></li>
<li><a href="http://">Términos y condiciones</a></li>
<li>® 2020 Mi blog con TailwindCSS ♥</li>
</ul>
</footer>
Aquí lo que hacemos es que por defecto muestre la lista con los links de forma vertical hasta que el tamaño de la pantalla tenga un mínimo de 768 píxeles, en ese caso, se mostrarán de forma horizontal.
También añadí unos cambios en los links desde el archivo css/tailwind.css para no tener que hacerlo para cada etiqueta.
footer > ul > li {
@apply py-1 px-4;
}
footer > ul > li > a:hover {
@apply underline;
}
Conclusiones
Y ya está listo 🎉. Así de sencillo es crear un blog totalmente responsive con TailwindCSS. Os recomiendo que para profundizar creeis vuestros propios proyectos y los compartáis en la caja de comentarios, yo estaré encantado de echarles un vistazo y daros algún consejo si lo necesitáis 😃.
Y bueno, ya no habrá nuevos tutoriales hasta Octubre ya que por fin empiezan mis vacaciones la próxima semana 🎉.
Como siempre, os dejo el enlace al repositorio..
Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.
Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.
Nos leemos 👋.