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
Aportes 6
Preguntas 0
No olviden agregarle semantica a su HTML
<body>
<header>
<nav></nav>
<div id="tabBar"></div>
</header>
<main>
<section>
<div id="home"></div>
<div id="recommendations"></div>
<div id="featured_rentals"></div>
</section>
</main>
</body>
<!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>
<div id="home"></div>
<div id="recomendadas"></div>
<div id="rentas_destacadas"></div>
<div id="faq"></div>
</section>
<footer></footer>
</body>
</html>
Copia y pega en html
Pega esto y da enter
nav+div#tab_bar+section+footer
Dentro de section mete esto:
div#home+div#recomendandos+div#rentas_destacadas
Tarann…
<nav></nav>
<div id="tab_bar"></div>
<section>
<div id="home"></div>
<div id="recomendandos"></div>
<div id="rentas_destacadas"></div>
</section>
<footer></footer>
<nav></nav>
<div id=“tab_bar”></div>
<section>
<div id=“home”></div>
<div id=“recomendadas”></div>
<div id=“rentas_destacadas”></div>
</section>
<footer></footer>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?