h-96
es la altura máxima que nos deja usar tailwind, pero también podemos indicar la altura que queramos, como h-[36rem]
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 17
Preguntas 4
h-96
es la altura máxima que nos deja usar tailwind, pero también podemos indicar la altura que queramos, como h-[36rem]
En determinado elemento se añade el prefijo lg:
correspondiente a un min-width: 1024px
seguido de la clase que tendrá para ese tamaño. Se puede añadir tantos breakpoints como se desee a cualquier elemento.
–
Por ejemplo en la sección home:
<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 lg:space-y-0 lg:items-start lg:pt-20 lg:justify-start">
<input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
<div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
<p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
</div>
<button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
</div>
<div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
<img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
</div>
</div>
</div>
Para reducir nuestro problemas en responsible trata siempre en lo posible de no romper el flujo normal del documento con position absolute si existen alternativas para conseguir lo mismo.
Mi pregunta a todo esto, qué pasa si alguien viene con una tablet o da vuelta el celular?
Más que responsive design veo que estamos trabajando para dos pantallas predefinidas.
Alguno con más experiencia que puede comentar?
Gracias
Tanto costaba apretar alt z?
Hola a todos, acá les dejo el código del home haciendo que la sección del mensaje en la imagen del home y el botón se reposicionen en el centro aprovechando que el contenedor tiene la propiedad flex:
<div class="w-full h-3/4 lg:relative" id="home">
<div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:justify-center lg:h-full lg:pl-16">
<input class="text-primary outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:ring-primary focus:w-11/12 lg:hidden" placeholder="San Francisco" type="search" name="" id="">
<div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
<p class="text-4xl font-bold">Encuentra más ubicaciones como esta</p>
</div>
<button class="w-48 rounded-full bg-white text-lg text-primary shadow-sm font-semibold p-4 transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110">
Explorar
</button>
</div>
<div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
<img class="lg:hidden" src="../public/img/sanFrancisco.jpg" alt="">
</div>
</div>
Note que el texto de la parte del home no cambiaba de forma por mas que coloque font-bold , font-semibold o font-extrabold , esto se debe a que cuando copiamos la fuente Montserrat del Google Fonts no elegimos las opciones para esos tamaños de fuente.
aqui debajo dejo el link correspondiente a pegar para que se vea en negrita
<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:wght@400;600;700&display=swap" rel="stylesheet">
Don’t use sm: to target mobile devices
<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class=“sm:text-center”></div>
Use unprefixed utilities to target mobile, and override them at larger breakpoints
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class=“text-center sm:text-left”></div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?