Sizing

Utilities for controlling the width, height, and overall size of elements.

Width

Class	CSS Property
`w-0`	width: 0
`w-auto`	width: auto
`w-full`	width: 100%
`w-screen`	width: 100vw
`w-fit`	width: fit-content
`w-1/2`	width: 50%
`w-1/3`	width: 33.333333%
`w-2/3`	width: 66.666667%
`w-1/4`	width: 25%
`w-3/4`	width: 75%

Example: Fractional widths

w-1/4

w-1/2

w-3/4

w-full

<div class="w-1/4">25%</div>
<div class="w-1/2">50%</div>
<div class="w-3/4">75%</div>
<div class="w-full">100%</div>

Min Width

Class	CSS Property
`min-w-0`	min-width: 0

Max Width

Class	CSS Property
`max-w-sm`	max-width: 24rem
`max-w-md`	max-width: 28rem
`max-w-lg`	max-width: 32rem
`max-w-xl`	max-width: 36rem
`max-w-2xl`	max-width: 42rem
`max-w-3xl`	max-width: 48rem
`max-w-4xl`	max-width: 56rem
`max-w-5xl`	max-width: 64rem
`max-w-6xl`	max-width: 72rem
`max-w-7xl`	max-width: 80rem
`max-w-full`	max-width: 100%
`max-w-none`	max-width: none
`max-w-prose`	max-width: 65ch

Example: Constraining content width

max-w-md mx-auto

<div class="max-w-md mx-auto p-4">
  Content constrained to 28rem and centered.
</div>

Height

Class	CSS Property
`h-0`	height: 0
`h-auto`	height: auto
`h-full`	height: 100%
`h-screen`	height: 100vh

Min Height

Class	CSS Property
`min-h-0`	min-height: 0
`min-h-full`	min-height: 100%
`min-h-screen`	min-height: 100vh

Size

Set both width and height simultaneously.

Class	CSS Property
`size-full`	width: 100%; height: 100%