width

Ejemplos

Ejemplo básico

Usa utilidades w-<number> como w-24 y w-64 para establecer un ancho fijo para un elemento basándote 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>

Usar un porcentaje

Usa las utilidades w-full o w-<fraction> como w-1/2 y w-2/5 para darle a un elemento un ancho basado en un 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>

Usar la escala de contenedores

Usa utilidades como w-sm and w-xl para establecer un ancho fijo para un elemento basándote en la escala de contenedores:

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

Coincidir con el viewport

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

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

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

Restablecer el ancho

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

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

Establecer tanto el ancho como la 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>

Usar un valor personalizado

Usa la sintaxis w-[<value>] para establecer el/la ancho basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad width 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="w-1/2 md:w-full ...">  <!-- ... --></div>

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

Personalizar el tema

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