Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Medidas y Breakpoints

8/29
Recursos

Aportes 7

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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=鈥渨-auto h-screen bg-sky-200 flex鈥>
<div class=鈥渨-1/4 h-1/4 bg-sky-700鈥></div>
<div class=鈥渨-1/4 h-1/4 bg-cyan-400鈥></div>
<div class=鈥渨-1/3 h-1/4 bg-cyan-700鈥></div>
<div class=鈥渨-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