width

Ejemplos

Ejemplo básico

Usa utilidades w-<number> como w-24 y w-64 para establecer un ancho fijo para un elemento basado en la escala de espaciado:

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

Usando un porcentaje

Usa w-full o utilidades w-<fraction> como w-1/2 y w-2/5 para darle a un elemento un ancho basado en porcentaje:

<div class="flex ...">
  <div class="w-1/2 ...">w-1/2</div>
  <div class="w-1/2 ...">w-1/2</div>
</div>
<div class="flex ...">
  <div class="w-2/5 ...">w-2/5</div>
  <div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
  <div class="w-1/3 ...">w-1/3</div>
  <div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="w-1/4 ...">w-1/4</div>
  <div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="w-1/5 ...">w-1/5</div>
  <div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>

Usando la escala del contenedor

Usa utilidades como w-sm y w-xl para establecer un ancho fijo para un elemento basado en la escala del contenedor:

<div class="w-xl ...">w-xl</div>
<div class="w-lg ...">w-lg</div>
<div class="w-md ...">w-md</div>
<div class="w-sm ...">w-sm</div>
<div class="w-xs ...">w-xs</div>
<div class="w-2xs ...">w-2xs</div>
<div class="w-3xs ...">w-3xs</div>

Coincidiendo con el viewport

Usa la utilidad w-screen para hacer que un elemento abarque todo el ancho del viewport:

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

Alternativamente, puedes coincidir con el ancho de los viewports grande, pequeño o dinámico usando las utilidades w-lvw, w-svw y w-dvw.

Restableciendo el ancho

Usa la utilidad w-auto para eliminar el ancho asignado de un elemento bajo una condición específica, como en un breakpoint particular:

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

Estableciendo tanto el ancho como el alto

Usa utilidades como size-px, size-4 y size-full para establecer tanto el ancho como el alto 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 w-[<value>] para establecer el width basado en un valor completamente personalizado:

<div class="w-[5px] ...">
  <!-- ... -->
</div>

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

<div class="w-(--my-width) ...">
  <!-- ... -->
</div>

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

Responsive design

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

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

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

Personalizando tu tema

Las utilidades w-<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.