Contenido del curso
Jhon Jairo Diaz Juris
Un pequeño layaout hecho por mi
Neil Ruiz
En el ejemplo planteado en el minuto 4:21 de la clase, es importante hacer 2 precisiones relacionadas con la línea de código en la que se define el contenedor div, la cual luce de la siguiente forma:
La primera de ellas está relacionada con la utilización simultánea de las clases container y max-w genera un conflicto entre ellas, ya que la clase container no tendrá efecto en breakpoints grandes, debido a que max-w-md lo restringe.
La segunda es que el valor md asignado a la clase max-w, no corresponde a los mismos 768px asociados al breakpoint md, ya que la propiedad max-w tiene definido 448px para el mismo valor md. Esto sucede porque a pesar de utilizar la misma combinación de caracteres md, estos valores sirven para propósitos distintos en Tailwind CSS.
De una parte está max-w-md (28rem = 448px) que controla el ancho máximo de un elemento, mientras que md: (768px) define el breakpoint para aplicar estilos condicionalmente.
Gastón Vilariño
La diferencia entre container y max-w en Tailwind CSS radica en su funcionalidad.
container: es una clase que establece un ancho responsivo para el contenedor en diferentes puntos de ruptura (breakpoints). Se adapta automáticamente al tamaño de la pantalla, aplicando márgenes automáticos para centrar el contenido.
max-w: es una clase que limita el ancho máximo de un elemento a un valor específico (por ejemplo, max-w-sm, max-w-md). Esto evita que el elemento se expanda más allá de ese ancho, logrando un diseño más controlado.
Ambas clases son útiles para crear layouts responsivos y mejorar la estética del diseño.
Juan Esteban Gallego Bolivar
Cuando a un elemento se le asigna la clase container lo que está pasando es que tiene un width: 100%, sin embargo se fijará al breakpoint actual según el tamaño del viewport. Es decir, si mi viewport es de 700px y tengo un div con la clase container, este no crecerá más de 640px, ya que se fija al breakpoint sm. Hasta que el viewport no llegue al breakpoint md (768px), el div container no crecerá.
Esto pasa para todos los breakpoints.
Yorgen Omar Marciales Parada
La clase container es importante en Tailwind CSS porque te permite crear un diseño responsivo que se adapta a diferentes tamaños de pantalla. Establece un ancho máximo y centra el contenido, facilitando la creación de layouts limpios y organizados. Sin embargo, no sería aplicable en casos donde se necesite un diseño de página completamente fluido o en elementos que deben ocupar todo el ancho disponible, como un fondo de pantalla o secciones a pantalla completa.
Alian polo
<!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" /> <title>Document</title> </head> <body> <div class="content flex flex-wrap justify-center"> <div class="flex h-24 w-full justify-around bg-amber-500"> <div class="mt-4 h-16 w-16 rounded-full bg-amber-200"></div> <div class="mt-4 h-16 w-16 rounded-full bg-amber-200"></div> </div> <div class="m-5 w-auto min-w-48 max-w-72 rounded-3xl bg-amber-500 p-12"></div> <div class="m-5 w-auto max-w-80 min-w-48 rounded-3xl bg-amber-500 p-12"></div> <div class="m-5 w-auto max-w-80 min-w-48 rounded-3xl bg-amber-500 p-12"></div> <div class="m-5 w-auto max-w-72 min-w-48 rounded-3xl bg-amber-500 p-12"></div> <div class="m-5 w-auto max-w-72 min-w-48 rounded-3xl bg-amber-500 p-12"></div> </div> </body> </html>
Mauro Nava
