Block Size - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "block-size"; export const description = "Utilities for setting the block size of an element.";

<ApiTable rows={[ ["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:

<Figure> <Example> { <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white"> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-96"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-96</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-80"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-80</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-64"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-64</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-48"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-48</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-40"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-40</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-32"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-32</div> </div> <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-24"> <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-24</div> </div> </div> } </Example>

html

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

</Figure>

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:

<Figure> <Example> { <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white block-96"> <div className="relative flex items-end block-full"> <Stripes border className="absolute inset-0 rounded-lg block-full" /> <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"> <Stripes border className="absolute inset-0 rounded-lg 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"> <Stripes border className="absolute inset-0 rounded-lg 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"> <Stripes border className="absolute inset-0 rounded-lg 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"> <Stripes border className="absolute inset-0 rounded-lg 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> } </Example>

html

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

</Figure>

Matching viewport

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

html

<!-- [!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:

html

<!-- [!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:

html

<!-- [!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:

html

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

Using a custom value

Responsive design

Customizing your theme