Syntax

width

Setting an element’s width.

Class	Declarations
`w:<size>`	`width: <size>/16rem;`
`w:9876536/8`	`width: <n>00%;`
`w:full`	`width: 100%;`
`w:fit`	`width: fit-content;`
`w:min`	`width: min-content;`
`w:max`	`width: max-content;`
`w:screen-4xs`	`width: 22.5rem;`
`w:screen-3xs`	`width: 30rem;`
`w:screen-2xs`	`width: 37.5rem;`
`w:screen-xs`	`width: 48rem;`
`w:screen-sm`	`width: 52.125rem;`
`w:screen-md`	`width: 64rem;`
`w:screen-lg`	`width: 80rem;`
`w:screen-xl`	`width: 90rem;`
`w:screen-2xl`	`width: 100rem;`
`w:screen-3xl`	`width: 120rem;`
`w:screen-4xl`	`width: 160rem;`

Apply conditionally

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

<div class="width:full:hover width:full@sm width:full@dark width:full@print">…</div>

Controlling how whitespace and line breaks within an element are handled.

Setting how an element is expected to change in the browser.

Master UI

© 2025 Aoyue Design LLC.MIT License

Trademark Policy

Theme: