height

Ejemplos

Ejemplo básico

Utiliza utilidades h-<number> como h-24 y h-64 para establecer una altura fija en un elemento basada en la escala de espaciado:

<div class="h-96 ...">h-96</div><div class="h-80 ...">h-80</div><div class="h-64 ...">h-64</div><div class="h-48 ...">h-48</div><div class="h-40 ...">h-40</div><div class="h-32 ...">h-32</div><div class="h-24 ...">h-24</div>

Usar un porcentaje

Utiliza utilidades h-full o h-<fraction> como h-1/2 y h-2/5 para dar a un elemento una altura basada en porcentaje:

<div class="h-full ...">h-full</div><div class="h-9/10 ...">h-9/10</div><div class="h-3/4 ...">h-3/4</div><div class="h-1/2 ...">h-1/2</div><div class="h-1/3 ...">h-1/3</div>

Ajustar al viewport

Utiliza la utilidad h-screen para hacer que un elemento ocupe toda la altura del viewport:

<div class="h-screen">  <!-- ... --></div>

Ajustar al viewport dinámico

Utiliza la utilidad h-dvh para hacer que un elemento ocupe toda la altura del viewport dinámico, la cual cambia a medida que la interfaz del navegador se expande o se contrae:

<div class="h-dvh">  <!-- ... --></div>

Ajustar al viewport grande

Utiliza la utilidad h-lvh para establecer la altura de un elemento al valor máximo posible de la altura del viewport:

<div class="h-lvh">  <!-- ... --></div>

Ajustar al viewport pequeño

Utiliza la utilidad h-svh para establecer la altura de un elemento al valor mínimo posible de la altura del viewport:

<div class="h-svh">  <!-- ... --></div>

Establecer ancho y alto al mismo tiempo

Utiliza utilidades como size-px, size-4, y size-full para establecer tanto el ancho como la altura de un elemento al mismo tiempo:

<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

Usar un valor personalizado

Usa la sintaxis h-[<value>] para establecer el/la altura basándose en un valor completamente personalizado:

<div class="h-[32rem] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis h-(<custom-property>) :

<div class="h-(--my-height) ...">  <!-- ... --></div>

Esto es solo un atajo para h-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad height el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="h-1/2 md:h-full ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar tu tema

Las utilidades h-<number> y size-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:

@theme {  --spacing: 1px; }

Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.