box-sizing

Ejemplos

Incluyendo bordes y padding

Usa la utilidad box-border para establecer el box-sizing de un elemento en border-box, indicando al navegador que incluya los bordes y el padding del elemento cuando le asignas una altura o anchura.

Esto significa que un elemento de 100px × 100px con un borde de 2px y 4px de padding en todos los lados se renderizará como 100px × 100px, con un área de contenido interna de 88px × 88px:

<div class="box-border size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

Tailwind establece esto como predeterminado para todos los elementos en nuestros estilos base preflight.

Excluyendo bordes y padding

Usa la utilidad box-content para establecer el box-sizing de un elemento en content-box, indicando al navegador que agregue bordes y padding sobre la anchura o altura especificada del elemento.

Esto significa que un elemento de 100px × 100px con un borde de 2px y 4px de padding en todos los lados se renderizará realmente como 112px × 112px, con un área de contenido interna de 100px × 100px:

<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

Diseño Responsive

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

<div class="box-content md:box-border ...">
  <!-- ... -->
</div>

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