Medidas y Breakpoints

Breakpoints:

sm - 640px
md - 768px
lg - 1024px
xl - 1280px
2xl - 1536px

Documentación oficial de Width
Documentación oficial de height

Ejemplo práctico

<div class=“w-auto h-screen bg-sky-200 flex”>
<div class=“w-1/4 h-1/4 bg-sky-700”></div>
<div class=“w-1/4 h-1/4 bg-cyan-400”></div>
<div class=“w-1/3 h-1/4 bg-cyan-700”></div>
<div class=“w-1/4 h-1/4 bg-cyan-900”></div>
</div>

Un breakpoint es el salto en el que cambia la pantalla de layout. Se pueden manipular los estilos de nuestro archivo en función al tipo de dispositivo.

Debido a que Tailwind es mobile first, todo el tiempo se estará trabajando con el breakpoint small.

Breakpoints más comunes:

• 320px → Small → Dispositivo mobile.
• 768px → Medium → Tablet.
• 1280px → Large → Computadora.

En el sizing, para trabajar las medidas de width y height se usa la clase w-{number} y h-{number} respectivamente, cabe mencionar que cada unidad es igual a 0.25rem. Por ejemplo, w-4 es lo mismo que width: 1rem;

Las medidas porcentuales se manejan como una fracción, w-{fraction}. Por ejemplo: w-1/2 es lo mismo que width: 50%;. También existe w-auto (width: auto)

Otras propiedades para width: min-w-{number}, max-w-{number}, min-w-full.

Otras propiedades para height: min-w-{number}, max-w-{number}, min-w-full.

Más propiedades en la documentación https://tailwindcss.com/docs/min-width

Ejemplo practico:

<div class="w-auto h-screen bg-sky-200 flex">
  <div class="w-1/2 h-1/4 bg-sky-700"></div>
  <div class="w-1/4 h-1/2 bg-cyan-400"></div>
  <div class="w-1/4 h-32 bg-cyan-700"></div>
  <div class="w-1/3 h-72 bg-cyan-900"></div>
</div>

Señores algo muy importante agreguen a su css la clase:
box-border que hace alusión a esto en css --> box-sizing: border-box;

Les dejo el link de Tailwind Play por si quieren jugar con tailwind sin necesidad de instalarlo.

No entiendo este video nos empieza contando como es el tema de los breackpoint dice que lo va a mirar y luego no mira nada salta al ancho y largo. Uffff se me hace dificil seguirla

Tailwind rompe los estándares de CSS. Crearon sus propias reglas de desarrollo, pero no lo veo muy practico porque si cada framework hace lo mismo cada desarrollador(a) tendrá que aprender cada regla en particular. Además, que el uso de estilos directamente en las clases es algo que podría saturar las lineas de código…

📝 Mis apuntes:

.
¿Qué es un Breakpoint?

Los Breakpoint son las medidas de anchura que utilizamos para el diseño responsivo. Con esas medidas aplicamos los estilos CSS con los tamaños concretos y definidos por las media queries. Con otras palabras, los puntos de ruptura son saltos en los que la pantalla va a cambiar de layout.
.
Los Breakpoints más comunes son:

• 320px para dispositivos móviles, en Tailwind sera sm
• 768px para tablets, en Taileind ser md
• 1280px para pantallas de computador, en Taileind ser lg

.

Width:

Width fijo:

• Utilice **w-{number}**o **w-px**para establecer un elemento en un ancho fijo.

Width porcentual:

• Use **w-{fraction}**o **w-full**para establecer un elemento en un ancho basado en porcentaje.

Width de ventana:

• Use **w-screen**para hacer que un elemento abarque todo el ancho de la ventana gráfica.

Utilidades para establecer el width mínimo de un elemento.

• Establezca el ancho mínimo de un elemento usando las min-w-{width}

Utilidades para establecer el width máximo de un elemento.

• Establezca el ancho máximo de un elemento usando las max-w-{size}

.

Height:

Height fijo:

• Use **h-{number}**o **h-px**para establecer un elemento a una altura fija.

Height completa:

• Use **h-full**para establecer la altura de un elemento al 100 % de su padre, siempre que el padre tenga una altura definida.

Height de ventana:

• Use **h-screen**para hacer que un elemento abarque toda la altura de la ventana gráfica.

Utilidades para establecer la height mínima de un elemento.

• Establezca la altura mínima de un elemento utilizando las utilidades min-h-0, min-h-fullo .min-h-screen

Utilidades para establecer la height máxima de un elemento.

• Establezca la altura máxima de un elemento con las utilidades max-h-fullo .max-h-screen