Una práctica que estuve haciendo con tailwind:
En cel
En tablet
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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 14
Preguntas 2
Una práctica que estuve haciendo con tailwind:
En cel
En tablet
2)Guia para Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Documentancion para Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Juego para aprender Flexbox
https://flexboxfroggy.com/#es
Flexbox es un modelo de layout que funciona principalmente respecto a un eje X y un eje Y.
Controlando todo de manera unidimensional, esto se traduce al uso de una fila o columna.
Al usar la palabra flex
dentro de una clase, por defecto será flexbox en dirección de fila (row), para cambiar la dirección a columna se usa flex-col
.
El layout de Grid funciona como una cuadricula compuesta de filas y columnas, la cual nos permite dividir nuestra página en áreas o secciones.
Ejemplo practico:
<div class="w-96 h-96 bg-sky-200 p-10 m-20 flex flex-col space-y-4 justify-center items-center">
<div class="w-16 h-16 bg-gray-400"></div>
<div class="w-16 h-16 bg-gray-400"></div>
<div class="w-16 h-16 bg-gray-400"></div>
<div class="w-16 h-16 bg-gray-400"></div>
</div>
Más información de Flex y Grid en la documentación oficial del framework: https://tailwindcss.com/docs/flex
Cuando cambiamos el flexbox a column
, el justify-content modifica el layout verticalmente y el align-items horizontalmente.
.
Estas dos propiedades como que se invierten
Si aún no dominas Flex, esta es la mejor guía que he conocido: https://flexboxfroggy.com/#es
Me encantó tailwind por las siguentes razones:
Un diseño bastante cutre pero solo para hacer las pruebas iniciales con flex y tratar de acomodar unos elementos básicos
En móvil
En dispositivo md
<div class="w-96 h-96 bg-slate-300 p-10 mx-auto my-40 flex flex-col space-y-4 flex-wrap group">
<div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
<div class="w-16 h-16 bg-red-400"></div>
<div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
<div class="w-16 h-16 bg-red-400"></div>
<div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
<div class="w-16 h-16 bg-red-400"></div>
<div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
</div>
Haciendo algunas pruebas con flex:
<div class="flex space-x-3 justify-center">
<div class="w-32 h-32 bg-blue-200"></div>
<div class="w-32 h-32 bg-blue-300"></div>
<div class="w-32 h-32 bg-blue-400"></div>
<div class="w-32 h-32 bg-blue-500"></div>
</div>
<div class="flex flex-col space-y-3 items-end">
<div class="w-32 h-32 bg-red-200"></div>
<div class="w-32 h-32 bg-red-300"></div>
<div class="w-32 h-32 bg-red-400"></div>
<div class="w-32 h-32 bg-red-500"></div>
</div>
.
Flexbox es un modelo de Layout que funciona principalmente respecto a un je X y un eje Y. Controlando todo de manera unidimensional, esto se traduce al uso de una fila o columna.
.
Cuando nosotros utilizamos dentro de Tailwind la palabra reservada flex vamos a tener por defecto que se ordenen nuestros elementos en fila, esto quiere decir que van a estar uno tras otro, pero también tenemos la opción de trabajarlo en columna.
.
Grid funciona como una cuadrícula compuesta de filas y columnas, la cual nos permite dividir nuestra página en áreas o secciones.
Me encanta tailwind, me encanta su sintaxis, se me hace muy declarativa. Sin embargo, no me gustaria llenar mis elementos de html con tantas clases, yo por esa razón estoy fuera
Tener presente que al cambiar el comportamiento default de flexbox de row a column, también cambian las propiedades de justify y items. Para justify con direction row si centra en el axis X si se cambia el flex a column justify centra en el axis Y. Y lo mismo sucede con items y su axis Y.
Pequeño aporte:
Cuando en flex realizas la acción con la clase “flex-col” en realidad el uso de las propiedades como justify y align-items(items) se invierte el eje. Es decir en row justify funcionará bien en el EJE X y items en el EJE Y, pero cuando inviertes a column justify estará en el EJE Y e items en el EJE X
Juegos útiles para aprender Flexbox:
(Busquen estos juegos en Google, por algún motivo me dice que los enlaces no son seguros)
Flexbox Froggy
Flexbox Defense
Página de pruebas de Tailwind CSS
Código de la profesora:
<div class=“w-96 h-96 bg-gray-400 p-10 m-20 flex flex-col space-y-4 justify-end items-end”>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
</div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.