Sizing

Set width and height constraints using spacing, size tokens, fractions, and keywords.

Use width, height and size for direct dimensions; use min- and max- constraints when a box should adapt within bounds. Pair w-full with max-w-* for fluid content that stops growing at a readable measure.

Quick reference

Example class	Expected declarations
`size-12`	`width: 3rem; height: 3rem;`
`h-24`	`height: 6rem;`
`w-1/2`	`width: calc(100% * 1 / 2);`
`max-w-64`	`max-width: 16rem;`
`min-w-0`	`min-width: 0;`
`min-h-24`	`min-height: 6rem;`
`max-h-32`	`max-height: 8rem;`
`size-card`	`width: var(--zw-size-card); height: var(--zw-size-card);`
`max-w-reading`	`max-width: var(--zw-size-reading);`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Set a dimension

size-12 sets both sides to 3rem; h-24 sets 6rem high, and w-1/2 takes half of the parent width.

Set a dimension

HTML

<div class="wind-demo">
  <div class="wind-demo-frame w-64 flex flex-col gap-2">
    <div class="wind-demo-tile size-12">size-12 square</div>
    <div class="wind-demo-tile h-24 w-1/2">h-24 and half width</div>
    <div class="wind-demo-tile w-full">w-full fills the frame</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.h-24 {
  height: 6rem;
}
.w-1\/2 {
  width: calc(100% * 1 / 2);
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-col",
        "gap-2",
        "h-24",
        "size-12",
        "w-1/2",
        "w-64",
        "w-full"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Bound a flexible box

min-w-0 permits a flex child to shrink, max-w-48 caps its width, min-h-24 sets a floor, and max-h-32 caps a taller h-48 box.

Bound a flexible box

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Minimums keep a box from getting smaller; maximums cap it.</p>
  <div class="wind-demo-frame w-64 flex flex-row gap-2">
    <div class="wind-demo-tile min-w-0 max-w-48 w-full">min-w-0 allows this flex item to shrink; max-w-48 caps width</div>
    <div class="wind-demo-tile min-h-24">min-h-24 keeps this box at least 6rem tall</div>
    <div class="wind-demo-tile h-48 max-h-32 overflow-hidden">h-48 is capped by max-h-32</div>
    <div class="wind-demo-tile max-w-64">max-w-64 sets a maximum width</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.h-48 {
  height: 12rem;
}
.max-h-32 {
  max-height: 8rem;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-64 {
  max-width: 16rem;
}
.min-h-24 {
  min-height: 6rem;
}
.min-w-0 {
  min-width: 0;
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.overflow-hidden {
  overflow: hidden;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-row",
        "gap-2",
        "h-48",
        "max-h-32",
        "max-w-48",
        "max-w-64",
        "min-h-24",
        "min-w-0",
        "overflow-hidden",
        "w-64",
        "w-full"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Use named and arbitrary values

size-card resolves tokens.sizes.card to 5rem; w-[18rem] is a one-off value and max-w-reading resolves the separately configured size token.

Use named and arbitrary values

HTML

<div class="wind-demo">
  <div class="wind-demo-frame w-full">
    <div class="wind-demo-tile size-card">Named size token: card</div>
    <div class="wind-demo-tile w-[18rem] max-w-reading">Arbitrary width with a named maximum</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-size-card: 5rem;
    --zw-size-reading: 20rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.size-card {
  width: var(--zw-size-card);
  height: var(--zw-size-card);
}
.max-w-reading {
  max-width: var(--zw-size-reading);
}
.w-\[18rem\] {
  width: 18rem;
}
.w-full {
  width: 100%;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "sizes": {
        "card": "5rem",
        "reading": "20rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "max-w-reading",
        "size-card",
        "w-[18rem]",
        "w-full"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

The configured spacingUnit is 0.25rem, so numeric forms such as w-16 resolve to 4rem. Values may also use fractions like w-1/2, built-in keywords such as full, min, max, fit, auto, screen or dvh, named tokens from tokens.sizes or tokens.spacing, and arbitrary CSS values like w-[18rem]. size sets width and height together. This preview explicitly configures tokens.sizes.card and tokens.sizes.reading.

Related guides: Utility grammar · Variants

Catalog details

size

Field	Value
Catalog identifier	`v1.size`
Class pattern	`size-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"width","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`9`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`width`, `height`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"auto"`	`"auto"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`width`	`resolved`	`null`
`height`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`size-full`	`width: 100%`; `height: 100%`

h

Field	Value
Catalog identifier	`v1.h`
Class pattern	`h-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"height","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`10`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`height`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"auto"`	`"auto"`
`keyword`	`"screen"`	`"100vh"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`height`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`h-full`	`height: 100%`

max-h

Field	Value
Catalog identifier	`v1.max-h`
Class pattern	`max-h-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"max-height","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`10`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`max-height`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"none"`	`"none"`
`keyword`	`"screen"`	`"100vh"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`max-height`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`max-h-full`	`max-height: 100%`

max-w

Field	Value
Catalog identifier	`v1.max-w`
Class pattern	`max-w-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"max-width","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`10`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`max-width`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"none"`	`"none"`
`keyword`	`"screen"`	`"100vw"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`max-width`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`max-w-full`	`max-width: 100%`

min-h

Field	Value
Catalog identifier	`v1.min-h`
Class pattern	`min-h-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"min-height","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`9`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`min-height`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"screen"`	`"100vh"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`min-height`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`min-h-full`	`min-height: 100%`

min-w

Field	Value
Catalog identifier	`v1.min-w`
Class pattern	`min-w-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"min-width","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`9`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`min-width`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"screen"`	`"100vw"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`min-width`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`min-w-full`	`min-width: 100%`

w

Field	Value
Catalog identifier	`v1.w`
Class pattern	`w-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"width","allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`10`
Token categories	`sizes`, `spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`sizing` (`8`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`width`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"auto"`	`"auto"`
`keyword`	`"screen"`	`"100vw"`
`keyword`	`"dvw"`	`"100dvw"`
`keyword`	`"dvh"`	`"100dvh"`

Declaration templates

Property	Value kind	Fixed value
`width`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`w-full`	`width: 100%`

Sizing

Quick reference

Examples in use

Set a dimension

Bound a flexible box

Use named and arbitrary values

Custom and named values

size

Accepted values

Declaration templates

Catalog examples

h

Accepted values

Declaration templates

Catalog examples

max-h

Accepted values

Declaration templates

Catalog examples

max-w

Accepted values

Declaration templates

Catalog examples

min-h

Accepted values

Declaration templates

Catalog examples

min-w

Accepted values

Declaration templates

Catalog examples

w

Accepted values

Declaration templates

Catalog examples

Revision History