Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

block-size

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
block-<number> block-size: calc(var(--spacing) * <number>);
block-<fraction> block-size: calc(<fraction> * 100%);
block-auto block-size: auto;
block-px block-size: 1px;
block-full block-size: 100%;
block-screen block-size: 100vh;
block-dvh block-size: 100dvh;
block-dvw block-size: 100dvw;
block-lvh block-size: 100lvh;
block-lvw block-size: 100lvw;
block-svh block-size: 100svh;
block-svw block-size: 100svw;
block-min block-size: min-content;
block-max block-size: max-content;
block-fit block-size: fit-content;
block-lh block-size: 1lh;
block-(<custom-property>) block-size: var(<custom-property>);
block-[<value>] block-size: <value>;

Examples#

Basic example#

Use block-<number> utilities like block-24 and block-64 to set an element to a fixed block size based on the spacing scale:

{

block-96
block-80
block-64
block-48
block-40
block-32
block-24
}

<!-- [!code classes:block-96,block-80,block-64,block-48,block-40,block-32,block-24] -->
<div class="block-96 ...">block-96</div>
<div class="block-80 ...">block-80</div>
<div class="block-64 ...">block-64</div>
<div class="block-48 ...">block-48</div>
<div class="block-40 ...">block-40</div>
<div class="block-32 ...">block-32</div>
<div class="block-24 ...">block-24</div>

Using a percentage#

Use block-full or block-<fraction> utilities like block-1/2 and block-2/5 to give an element a percentage-based block size:

{ 

    <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-full">
      <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-full</div>
    </div>
  </div>
  <div className="relative flex items-end block-full">

    <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-9/10">
      <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-9/10</div>
    </div>
  </div>
  <div className="relative flex items-end block-full">

    <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-3/4">
      <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-3/4</div>
    </div>
  </div>
  <div className="relative flex items-end block-full">

    <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/2">
      <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/2</div>
    </div>
  </div>
  <div className="relative flex items-end block-full">

    <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/3">
      <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/3</div>
    </div>
  </div>
</div>

}

<!-- [!code classes:block-9/10,block-3/4,block-1/2,block-1/3,block-full] -->
<div class="block-full ...">block-full</div>
<div class="block-9/10 ...">block-9/10</div>
<div class="block-3/4 ...">block-3/4</div>
<div class="block-1/2 ...">block-1/2</div>
<div class="block-1/3 ...">block-1/3</div>

Matching viewport#

Use the block-screen utility to make an element span the entire block size of the viewport:

<!-- [!code classes:block-screen] -->
<div class="block-screen">
  <!-- ... -->
</div>

Matching dynamic viewport#

Use the block-dvh utility to make an element span the entire block size of the viewport, which changes as the browser UI expands or contracts:

<!-- [!code classes:block-dvh] -->
<div class="block-dvh">
  <!-- ... -->
</div>

Matching large viewport#

Use the block-lvh utility to set an element's block size to the largest possible size of the viewport:

<!-- [!code classes:block-lvh] -->
<div class="block-lvh">
  <!-- ... -->
</div>

Matching small viewport#

Use the block-svh utility to set an element's block size to the smallest possible size of the viewport:

<!-- [!code classes:block-svh] -->
<div class="block-svh">
  <!-- ... -->
</div>

Using a custom value#

Responsive design#

Customizing your theme#