Max 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 = "max-block-size"; export const description = "Utilities for setting the maximum block size of an element.";

<ApiTable rows={[ ["max-block-<number>", "max-block-size: calc(var(--spacing) * <number>);"], ["max-block-<fraction>", "max-block-size: calc(<fraction> * 100%);"], ["max-block-none", "max-block-size: none;"], ["max-block-px", "max-block-size: 1px;"], ["max-block-full", "max-block-size: 100%;"], ["max-block-screen", "max-block-size: 100vh;"], ["max-block-dvh", "max-block-size: 100dvh;"], ["max-block-dvw", "max-block-size: 100dvw;"], ["max-block-lvh", "max-block-size: 100lvh;"], ["max-block-lvw", "max-block-size: 100lvw;"], ["max-block-svh", "max-block-size: 100svh;"], ["max-block-svw", "max-block-size: 100svw;"], ["max-block-min", "max-block-size: min-content;"], ["max-block-max", "max-block-size: max-content;"], ["max-block-fit", "max-block-size: fit-content;"], ["max-block-lh", "max-block-size: 1lh;"], ["max-block-(<custom-property>)", "max-block-size: var(<custom-property>);"], ["max-block-[<value>]", "max-block-size: <value>;"], ]} />

Examples

Basic example

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

<Figure> <Example> { <div className="flex block-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white"> <div className="relative grid block-full w-8 items-end rounded-lg"> <Stripes border className="absolute inset-0 block-full rounded-lg" /> <div className="relative block-full max-block-80 w-full rounded-lg bg-blue-500"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-80</div> </div> </div> <div className="relative grid block-full w-8 items-end rounded-lg"> <Stripes border className="absolute inset-0 block-full rounded-lg" /> <div className="relative block-full max-block-64 w-full rounded-lg bg-blue-500"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-64</div> </div> </div> <div className="relative grid block-full w-8 items-end rounded-lg"> <Stripes border className="absolute inset-0 block-full rounded-lg" /> <div className="relative block-full max-block-48 w-full rounded-lg bg-blue-500"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-48</div> </div> </div> <div className="relative grid block-full w-8 items-end rounded-lg"> <Stripes border className="absolute inset-0 block-full rounded-lg" /> <div className="relative block-full max-block-40 w-full rounded-lg bg-blue-500"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-40</div> </div> </div> <div className="relative grid block-full w-8 items-end rounded-lg"> <Stripes border className="absolute inset-0 block-full rounded-lg" /> <div className="relative block-full max-block-32 w-full rounded-lg bg-blue-500"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-32</div> </div> </div>

</div>

}

</Example>

html

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

</Figure>

Using a percentage

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

<Figure> <Example> { <div className="flex items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white block-96"> <div className="relative grid w-8 items-end rounded-lg block-full"> <Stripes border className="absolute inset-0 rounded-lg block-full" /> <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-9/10"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-9/10</div> </div> </div> <div className="relative grid w-8 items-end rounded-lg block-full"> <Stripes border className="absolute inset-0 rounded-lg block-full" /> <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-3/4"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-3/4</div> </div> </div> <div className="relative grid w-8 items-end rounded-lg block-full"> <Stripes border className="absolute inset-0 rounded-lg block-full" /> <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-1/2"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-1/2</div> </div> </div> <div className="relative grid w-8 items-end rounded-lg block-full"> <Stripes border className="absolute inset-0 rounded-lg block-full" /> <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-full"> <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-full</div> </div> </div> </div> } </Example>

html

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

</Figure>

Using a custom value

Responsive design

Customizing your theme