height

Ejemplos

Ejemplo básico

Usa utilidades h-<number> como h-24 y h-64 para establecer una altura fija a 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>

Usando un porcentaje

Usa utilidades h-full o h-<fraction> como h-1/2 y h-2/5 para darle 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>

Coincidiendo con el viewport

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

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

Coincidiendo con el viewport dinámico

Usa la utilidad h-dvh para hacer que un elemento ocupe toda la altura del viewport, que cambia a medida que la interfaz de usuario del navegador se expande o contrae:

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

Coincidiendo con el viewport grande

Usa la utilidad h-lvh para establecer la altura de un elemento a la mayor altura posible del viewport:

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

Coincidiendo con el viewport pequeño

Usa la utilidad h-svh para establecer la altura de un elemento a la menor altura posible del viewport:

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

Estableciendo tanto ancho como altura

Usa 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>

Usando un valor personalizado

Usa la sintaxis h-[<value>] para establecer el height basado 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 agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad height con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Las utilidades h-<number> y size-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.