Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 21
Preguntas 2
En esta clase, en el minuto 8:00 en lugar de darle un margin a alguno de los elementos convendría mejor usar un grid-gap, ya que esto le da espacio a los hijos del container por igual y no a uno con respecto a otro. Lo veo mejor.
Lo aprendí del curso de Responsive Design de Leonidas Esteban.
Ya solucione para que pueda meterle todas las cards que quiera y se acomoden solas y dejen un espacio en el centro sin usar margins, denle a cada card un md:5/12 en lugar de 1/2 y en el div que contiene las card le agregan md:flex md:justify-around y md:flex-wrap
Practica de integración card.
Aquí vamos !!! Con algunas modificaciones leves jeje
Cards
<!-- CARD -->
<div class="container mx-auto md:flex">
<div class= "mx-2 mt-4 rounded-lg md:mx-auto md:w-5/12 md:flex md:justify-around md:flex-wrap md:bg-white">
<div>
<img class="md:h-full object-cover md:w-48 rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="Hamburger"> <!-- object cover para que ocupe la imagen todo el espacio en vertical -->
</div>
<div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2 md:bg-transparent"> <!-- relative para colocarlo encima, shadow para aplicar efecto de sombra p de padding, mx-2 para que haya una separacion con los bordes -->
<h2 class="flex justify-center text-xl tracking-tight uppercase font-semibold text-gray-900 md:text-lg">Hamburger Cheese</h2>
<p class="text-gray-700 leading-snug"> Hamburguesa de queso con champiñones y carne</p> <!-- con leading snug se lo junta un poquito con el titulo -->
<div class="mt-2 text-sm font-semibold text-gray-700"> $2.50 USD </div>
<!-- agregar estrellas -->
<div class=" mt-2 text-xs text-yellow-700"> ★ ★ ★ ★ ☆ / 36 reseñas </div>
</div>
</div>
<!-- SECOND CARD -->
<div class= "mx-2 mt-4 rounded-lg md:mx-auto md:w-5/12 md:flex md:justify-around md:flex-wrap md:bg-white">
<div>
<img class="md:h-full object-cover md:w-48 rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="Hamburger"> <!-- object cover para que ocupe la imagen todo el espacio en vertical -->
</div>
<div class="relative shadow-lg mx-2 p-2 bg-white rounded-lg -mt-2 md:bg-transparent"> <!-- relative para colocarlo encima, shadow para aplicar efecto de sombra p de padding, mx-2 para que haya una separacion con los bordes -->
<h2 class="flex justify-center text-xl tracking-tight uppercase font-semibold text-gray-900 md:text-lg">Hamburger Cheese</h2>
<p class="text-gray-700 leading-snug"> Hamburguesa de queso con champiñones y carne</p> <!-- con leading snug se lo junta un poquito con el titulo -->
<div class="mt-2 text-sm font-semibold text-gray-700"> $2.50 USD </div>
<!-- agregar estrellas -->
<div class=" mt-2 text-xs text-yellow-700"> ★ ★ ★ ★ ☆ / 36 reseñas </div>
</div>
</div>
</div>
Vamos bien:
Codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Platzi Food | Home</title>
</head>
<body class="bg-gray-300">
<header>
<div class="flex justify-between items-center px-2 bg-secondary text-white">
<div>
<img class="h-8 py-1" src="images/logo-w.svg" alt="Platzi Food">
</div>
<div class="text-2xl">≡</div>
</div>
</header>
<main>
<div class="h-48 md:h-64 lg:h-80 bg-cover bg-bottom bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');"></div>
<div class="container md:flex md:mx-auto">
<div class="mx-2 mt-4 rounded md:w-1/2 md:flex md:bg-white md:rounded-lg">
<div>
<img class="rounded-lg md:rounded-r-sm md:w-full" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=60" alt="Hamburger">
</div>
<div class="relative shadow-lg bg-white md:bg-transparent md:shadow-none md:my-auto rounded-lg mx-2 -mt-4 p-2">
<h2 class="tracking-tight font-semibold md:text-md text-gray-900 uppercase">Cheese Hamburger</h2>
<p class="text-gray-700 md:text-xs leading-snug">Cheese Hambuerger with meat, tomatoes and a lot of delicious cheese.</p>
<div class="text-sm mt-2 font-semibold text-gray-700">3.99 USD$</div>
<div class="text-yellow-700 mt-2 text-xs">★★★★☆ | 47 reviews</div>
</div>
</div>
<div class="mx-2 mt-4 rounded md:w-1/2 md:flex md:bg-white md:rounded-lg">
<div>
<img class="rounded-lg md:rounded-r-sm md:w-full" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=60" alt="Hamburger">
</div>
<div class="relative shadow-lg bg-white md:bg-transparent md:shadow-none md:my-auto rounded-lg mx-2 -mt-4 p-2">
<h2 class="tracking-tight font-semibold md:text-md text-gray-900 uppercase">Cheese Hamburger</h2>
<p class="text-gray-700 md:text-xs leading-snug">Cheese Hambuerger with meat, tomatoes and a lot of delicious cheese.</p>
<div class="text-sm mt-2 font-semibold text-gray-700">3.99 USD$</div>
<div class="text-yellow-700 mt-2 text-xs">★★★★☆ | 47 reviews</div>
</div>
</div>
</div>
</main>
<footer class="md:absolute lg:flex-row-reverse md:items-center lg:flex lg:justify-between bottom-0 w-full bg-secondary text-white">
<div class="mt-4 md:mb-4 flex justify-center items-center">
<div class="mx-2 hover:text-blue-700"><i class="fa fa-facebook"></i> Platzi Food</div>
<div class="mx-2 hover:text-blue-500"><i class="fa fa-twitter"></i> @platzifood</div>
<div class="mx-2 hover:text-pink-500"><i class="fa fa-instagram"></i> @platzifood</div>
</div>
<div class="mt-4 md:mb-4">
<ul class="flex justify-center items-center">
<li class="mx-2">About us</li>
<li class="mx-2">Support</li>
<li class="mx-2">Registry</li>
<li class="mx-2">Privacy</li>
</ul>
</div>
</footer>
</body>
</html>```
Se puede usar GridCSS para ubicar los productos, hay un curso de ello y bien explicado en Platzi
No se, a mi no me esta gustando tailwind, Mientras mas complejo se vuelve el diseno, se ven las clases tan abultadas que no encuentro significado si lo veo de lejos. No digo nada malo del curso, el curso es interesante.
Creo que hace falta mejor un grid system para colocar las cards y en lugar de agregar todos los estilos a las cards sería mejor crear un componente que nos ayude a hacerlo más rápido y modulado.
lo malo es que si le agrego mas cards no se acomodan solos 😕
Mi PlatziFood:
Wua! esta quedando perfecto!
Esta bacán maquetar con Tailwind!!!
Tuve un problema con el h-full de la imagen cuando pasa a md, lo que hice fué asignar el width y heigth que queria en el contenedor y la imagen la dejé como w-full y h-full
Antes:
<div class="mx-2 md:mx-0 md:w-1/2 mt-4 rounded-lg md:flex md:bg-white md:shadow-lg md:items-center">
<div class="w-full md:w-48 md:h-full">
<img class="w-full h-full object-cover object-left rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1565060299509-453c4f3bc905?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
</div>
<div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2 md:bg-transparent md:shadow-none">
<h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900 md:text-lg">hamburguesa con queso</h2>
<div class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</div>
<div class="mt-2 text-sm font-semibold text-gray-700">MXN $15.00</div>
<div class="mt-2 text-xs text-yellow-700">★★★★★ 36 reseñas</div>
</div>
</div>
Después:
<div class="mx-2 md:mx-0 md:w-1/2 mt-4 rounded-lg md:flex md:bg-white md:shadow-lg md:items-center">
<div class="w-full md:w-48 md:h-full">
<img class="w-full h-full object-cover object-left rounded-lg md:rounded-r-none" src="https://images.unsplash.com/photo-1565060299509-453c4f3bc905?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
</div>
<div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2 md:bg-transparent md:shadow-none">
<h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900 md:text-lg">hamburguesa con queso</h2>
<div class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</div>
<div class="mt-2 text-sm font-semibold text-gray-700">MXN $15.00</div>
<div class="mt-2 text-xs text-yellow-700">★★★★★ 36 reseñas</div>
</div>
</div>
Ejemplo de tailwind para extender los tamaños
Asi vamos!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.