Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear tarjetas con un diseño atractivo es esencial en cualquier sitio web moderno. En esta sesión, vamos a aprender a conceptualizar y codificar tarjetas utilizando HTML y CSS, tomando como referencia un diseño creado en Figma. El enfoque estará en estructurar el diseño, definir los estilos y aprender algunos trucos para optimizar el diseño visual utilizando sombras y bordes redondeados.
Para empezar, es crucial definir la estructura básica de nuestra tarjeta en HTML. La tarjeta estará compuesta principalmente por dos secciones: la imagen y el texto.
<div class="tarjeta">
<div class="tarjeta-imagen"></div>
<div class="tarjeta-texto">
<p class="titulo">Noruega</p>
<p class="descripcion">Paisajes increíbles</p>
</div>
</div>
En este fragmento, creamos un div principal que contiene dos subsecciones. La primera, tarjeta-imagen, es donde se colocará la imagen de fondo, y la segunda, tarjeta-texto, contiene el título y la descripción de nuestra tarjeta.
Con la estructura lista, es momento de aplicar los estilos. La apariencia de nuestras tarjetas dependerá mucho del CSS que implementemos.
.tarjeta {
width: 48%;
height: 64%;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
}
.tarjeta-imagen {
width: 100%;
height: 60%;
background-image: url('noruega.png');
background-size: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tarjeta-texto {
width: 100%;
height: 40%;
background-color: #f0f0f0;
padding: 10px;
color: #333;
}
.titulo {
font-size: 1.5em;
font-weight: bold;
}
.descripcion {
font-size: 1em;
}
width y height específicos, junto a un box-shadow para un efecto de sombra sutil que realza su presencia.background-size: cover; para asegurar que la imagen cubra todo el contenedor, sin alterar sus proporciones.border-radius aseguran que los extremos de las tarjetas y de la imagen se vean consistentemente redondeados.padding en los textos evita que la información quede pegada a los bordes, creando un respiro visual.Este diseño es solo un punto de partida. Te animamos a:
background-color en los contenedores para adaptarse mejor a la estética general del portfolio.width y height según las necesidades del contenido que desees exhibir.Continúa practicando y retando tu creatividad a medida que creas y refinas tus tarjetas. ¡Esperamos verte en la próxima lección donde profundizaremos en la abstracción y reutilización de componentes para otro nivel de eficiencia en tu desarrollo web!
Aportes 33
Preguntas 8
En lugar de meter paddings en la card, usemos flex para más placer (:
<div class="bg-secondary w-full h-2/5 flex items-center justify-center flex-col rounded-b-lg">
<p class="text-white text-bold text-xl">Norway</p>
<p class="text-white text-medium">Beautiful landscapes</p>
</div>
Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:
p-20 → padding: 5rem;px-4 → padding-left: 1rem; padding-right: 1rem;py-2 → padding-top: 0.5rem; padding-bottom: 0.5rem;w-48 → width: 12rem;h-64 → height: 16rem;h-2/5 → height: 40%;h-3/5 → height: 60%;shadow-md → box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);rounded-lg → border-radius: 0.5rem;rounded-t-lg → border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;rounded-b-lg → border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;bg-norway → background-image: url('../img/norway.jpg');bg-cover → background-size: cover;font-bold → font-weight: 700;text-white → color: white;text-xl → font-size: 1.25rem; line-height: 1.75rem;–
Archivo index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../public/css/tailwind.css">
<title>Gogo Travel</title>
</head>
<body>
<nav></nav>
<div id="tab_bar"></div>
<section class="w-full h-screen">
<div id="home">
<div class="w-full h-3/4">
<div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center ">
<input type="search" class="outline-none p-3 rounded-full shadow-sm" placeholder="San Francisco" name="" id="">
<button class="w-36 rounded-full text-xl text-primary shadow-sm font-semibold p-4 bg-white">Explorar</button>
</div>
<div class="w-full h-full">
<img src="./img/sanFrancisco.jpg" alt="San Francisco City">
</div>
</div>
</div>
<div class="p-20" id="recomendadas">
<div class="w-48 h-64 shadow-md rounded-lg">
<div class="w-full h-3/5 rounded-t-lg bg-norway bg-cover"></div>
<div class="w-full h-2/5 bg-secondary rounded-b-lg">
<p class="text-white font-bold text-xl px-4 py-2">Norway</p>
<p class="text-white px-4">Paisajes Increíbles</p>
</div>
</div>
</div>
<div id="rentas_destacadas"></div>
<div id="faq"></div>
</section>
<footer></footer>
</body>
</html>
text-bold no existe, en su lugar se usa font-bold.text-md no existe (parece ser clase de Bootstrap), en su lugar se puede usar text-base.!Hi¡ Platzinauta.
Si tienes el siguiente error:
Es decir no te muestra la imagen de norway.jpg , lo mas probable es que la ruta sea incorrecta. La ruta de acuerdo al proyecto es …/img/norwary.jpg , pero esto puede cambiar según el sistema operativo que uses (también depende de la configuración del proyecto, pero tomando en cuenta que tu proyecto es organizado de la misma manera que en el curso, entonces esto no debe ser problema).
Dicho esto, lo mas probable es que sea la ruta, tienes que modificar dichas rutas en el archivo tailwind.config.js.
En mi caso quedo así:
Yo estoy en una pc con Ubuntu.
Animo Platzinautas. Los errores son parte del proceso.
Remember:
Never stop learning
Pequeña corrección:
La propiedad para hacer el texto bold es:
font-bold
El text-md realmente no existe, en su lugar yo use:
text-base
Que mal que no se ve bien lo que se escribe porque el video de la profe lo tapa 😦
Haré las cards así con conteo de like :3
Hola a todos si están teniendo problemas con las imágenes y colores del texto tengamos en cuenta lo siguiente:
Para las imágenes:
1.- Verificar que las rutas en tailwind.config.js tenga el path con dos puntos al inicio (…) ejemplo:
'norway': "url('../src/img/norway.jpg')",
Para los colores por defecto que nos da tailwind:
1.- Verificar que tailwind.config.js hayamos escrito la propiedad textColor dentro de theme y extends ya que esto hace que extienda los colores que asignemos y herede los que nos da tailwind.
2.- Para los backgrounds colors (bg) también hay que verificar que estén dentro de extends y muy importante verificar que hayamos escrito bien …theme(‘colors’),
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
backgroundImage: {
},
backgroundColor: theme => ({
...theme('colors'),
"primary": '#CC2D4A',
"secondary": '#8FA206',
'terciary': '#61AEC9'
}),
textColor: {
"primary": '#CC2D4A',
"secondary": '#8FA206',
'terciary': '#61AEC9'
},
fontFamily: {
Montserrat: [
'Montserrat', 'sans-serif'
]
}
}
},
plugins: [],
}
Hola.
A mí no me funciono el text-bold, en cambio, font-bold si,
Yo usé flex box dentro del div con los detalles del lugar. Código y como se va viendo a continuación:
Tener en cuenta que text-bold en realidad es font-bold y text-md en realidad es text-base
Después de tomar el curso práctico de frontend aprendí un “truco” para no estar usando siempre las imágenes como fondo y así quedó mi card.
Mismo resultado.
<div class="w-48 h-64 shadow-md rounded-lg">
<img class="w-full h-3/5 rounded-t-lg object-cover" src="./img/norway.jpeg" alt="">
<div class="w-full h-2/5 rounded-b-lg bg-secondary text-white px-4 py-2">
<p class="text-bold text-xl">Norway</p>
<p class="text-md">Beautiful landscapes</p>
</div>
</div>
si quieren que el borde se les adapte solo, deben poner la propiedad overflow-hidden en la caja padre
<div class="w-48 h-64 bg-red-200 shadow-md rounded-2xl mt-10 overflow-hidden">
<div class="w-full h-3/5 bg-red-300 ">1</div>
<div>2</div>
</div>
Acordaros de hacer cuando entréis, después de haber cerrado VSCode, de hacer npm run tw:build
code class recomendadas
<div class="p-20" id="recomendadas">
<div class="w-48 h-64 shadow-md rounded-lg">
<div class="w-full h-3/5 bg-norway bg-cover rounded-t-lg"></div>
<div class="w-full h-2/5 bg-secondary rounded-b-lg">
<p class="text-white font-bold text-xl px-4 py-2">Norway</p>
<p class="text-white text-md px-4">paisajes Increibles</p>
</div>
</div>
Prof Ana Díaz, por favor ponga viscode word wrap , para poder ver todo el texto, aquí no vemos lo que hace, ok?
cuando agregas un “rounded-lg” a una card y le agregas una imagen adentro de la card la imagen no esta obligada o limitada a tener el mismo borde redondeado de la carta, en este caso puedes hacer dos cosas:
le agregas el borde a la imagen en las esquinas
agregas un overflow-hidden a la card para que nada
sobresalga o se desborde de ella.
ambas logran el mismo efecto pero en este caso yo prefiero la segunda opcion
TEXT-WHITE
Para los que la clase text-white no les funcione es porque al modificar la propiedad textColor del tailwind.config.js substituyes todas las clases por default por las que agreges. Para solucionar eso escriban el codigo de abajo:
textColor: theme => ({
...theme('colors'),
'primary': '#CC2D4A',
'secondary': '#8FA206',
'terceary': '#61AEC9',
}),
Lo que estas haciendo es llamando una funcion que retorna una copia de todas las clases por default y luego le agregas las clases personalizadas que has colocado.
Si tienes problemas para que se vea la imagen de Noruega fíjate en que la dirección es comienza con 2 puntos (…/img), evita escribir src o public, fíjate también en que la carpeta img se encuentre dentro de public.
en cuanto a hacer el texto bold la profesora usa la propiedad text-bold la cual es incorrecta ya que la propiedad de tailwind para font-weight: bold es font-bold
Hola no sé si alguien más le ha pasado esto, pero en mi caso al dar un h-3/5 me pone el height a 0 px , razón por la que mi imagen no se visualiza.
Tip, para solucionar el error, de not found, en el url del backgroundImage
@parcel/core: Failed to resolve ‘…/assets/image/norway.jpg’ from ‘./src/css/tailwind.css’
.div{
background-image: url('../../assets/image/bali.jpg');
}
'bali': "url('../../assets/image/bali.jpg')",
y listo todo OK, eso entiendo que es porque el código se renderiza desde el archivo de tailwind.css
A mi no me funcionó trayendola desde el archivo de configuración de Tailwind, aunque estoy utilizando Reactjs para el proyecto pero no creo que ese sea el caso. De todos modos como ven en la imagen tuve que importar la imagen desde la carpeta de assests y presentarla con una etiqueta imagen dentro de div que estabamos trabajando
Si se fijan en el div que contiene la imagen tengo el bg-norway que este si se supone que debe traer las imagenes desde tailwind.config.cjs pero simplemente no funciona desde ahí, así que tuve que buscar la alternativa de colocarla con la etiqueta de img. Espero que este comentario le pueda ayudar a alguien. Fuí a la documentación de Tailwind a leer a ver si me faltaba algo pero no es así, todo está bien configurado.
Aquí les dejo una foto de mi archivo y el link a la documetación de background image por parte de tailwind https://tailwindcss.com/docs/background-image
Creo que le voy agarrando la onda xd
ATENCION:
A toda la gente que le falle el bg-norway, comprobad que se haya hecho el **build **correctamente en el fichero public/css/index.html
para ello usad el comando:
npx tailwindcss -i ./src/index.css -o ./public/css/index.css
aqui un hilo donde estuve buscando posibles soluciones al tema de las imagenes de background : https://github.com/tailwindlabs/tailwindcss/discussions/5504#discussioncomment-5374854
Para los que probaron con poner los dos puntos y las mil y una maneras para que les tome norway encontre una solucion que funciona aunque no creo que sea la mejor. Si se fijan el archivo tailwind.css que se renderiza (lo pueden buscar en source desde el navegador o en vs code, es el que genera el build), y buscan con ctrl+f norway van a ver que siemrpe les toma la ruta a la imagen como ./img/norway.js, por eso yo lo que hice fue poner la carpeta de las imagenes al mismo nivel que mi archivo de css ( )
Asi fue como yo hice mis cards 😃 no me gusto mucho la maquetacion del video pero intente hacerlo a mi manera y el resultado es muy parecido 😄
P.D: si tienen un error de que no se encuentra la imagen es porque la ruta que debemos tener es del tailwind output a las imagenes, yo crei que era del archivo config a las imagenes pero no 😃
<main class="w-full pl-3 pt-3 ">
<div id="recommended" class="flex h-52 flex-row overflow-scroll gap-10">
<div class="card w-44 h-52 flex flex-col basis-full justify-center items-center">
<div class="rounded-t-lg w-44 h-3/5 bg-norway bg-cover">
</div>
<div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
<p class="text-white font-bold text-xl">Noruega</p>
<p class="text-white text-base">Paisajes Increibles</p>
</div>
</div>
<div class="card w-44 h-52 flex flex-col basis-full justify-center items-center">
<div class="rounded-t-lg w-44 h-3/5 bg-new_york bg-cover">
</div>
<div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
<p class="text-white font-bold text-xl">Noruega</p>
<p class="text-white text-base">Paisajes Increibles</p>
</div>
</div>
<div class="card w-44 h-52 flex flex-col basis-full justify-center items-center">
<div class="rounded-t-lg w-44 h-3/5 bg-yosemite bg-cover">
</div>
<div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
<p class="text-white font-bold text-xl">Noruega</p>
<p class="text-white text-base">Paisajes Increibles</p>
</div>
</div>
<div class="card w-44 h-52 flex flex-col basis-full justify-center items-center">
<div class="rounded-t-lg w-44 h-3/5 bg-seattle bg-cover">
</div>
<div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
<p class="text-white font-bold text-xl">Noruega</p>
<p class="text-white text-base">Paisajes Increibles</p>
</div>
</div>
<div class="card w-44 h-52 flex flex-col basis-full justify-center items-center">
<div class="rounded-t-lg w-44 h-3/5 bg-switzerland bg-cover">
</div>
<div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
<p class="text-white font-bold text-xl">Noruega</p>
<p class="text-white text-base">Paisajes Increibles</p>
</div>
</div>
</div>
</main>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?