尺寸size

Style shorthand for setting the width and height of an element.

Overview

Examples

Set width and height together

Use size:* when the same value should apply to both width and height. This keeps square UI pieces readable in markup.

<button class="size:10x grid place-content:center">    ...</button>

@layer utilities {    .size\:10x {        width: 2.5rem;        height: 2.5rem    }}

Build square media and controls

size:* is a good fit for icons, avatars, swatches, checkboxes, handles, and fixed loading indicators.

<img class="size:12x round object-cover" src="..." alt="" />

Set one logical axis

Use size-x:* for inline size and size-y:* for block size.

<aside class="size-x:md size-y:20x">...</aside>

Use aspect-ratio when the element should keep a non-square ratio while one axis remains fluid.

<video class="w:full aspect-ratio:16/9" controls></video>

Use the full static utility

The full utility sets both axes to 100%. Use w:full or h:full when only one axis should fill.

<div class="full">...</div><div class="w:full">...</div>

Use intrinsic static utilities

Use fit when both axes should follow fit-content, or full when both axes should fill the available space.

<div class="fit">    Compact content</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="size:8x size:10x@sm full@dark size:6x@print">...</div>

For physical one-axis sizing, use width and height.