Sizing

Sizing utilities set width, height and their minimum and maximum. Fixed sizes read the same spacing scale as padding and margin, so a w-16 box and a p-16 gutter are the same length and change together when the scale changes.

How sizing works

Scale keys. w-16, width(16) and token(space-16) all mean var(--nu-space-16). Sizing has no scale of its own.
Percentages. A p suffix means percent: w-50p is width: 50%.
Breakpoint widths. A breakpoint name gives that breakpoint’s width: max-w-md is max-width: 768px.
Keywords. full, screen, auto, min, max and fit map to the matching CSS values.

Prefix	Property	Examples
`w`	`width`	`w-16`, `w-50p`, `w-full`
`h`	`height`	`h-8`, `h-100p`, `h-screen`
`min-w`, `min-h`	`min-width`, `min-height`	`min-w-0`, `min-h-full`
`max-w`, `max-h`	`max-width`, `max-height`	`max-w-md`, `max-h-64`

Scale

Fixed sizes use the spacing tokens. The table is generated from the compiled core source when the site is built.

Key	Token	Value	Pixels
`0`	`--nu-space-0`	`0`	0px
`1`	`--nu-space-1`	`0.25rem`	4px
`2`	`--nu-space-2`	`0.5rem`	8px
`3`	`--nu-space-3`	`0.75rem`	12px
`4`	`--nu-space-4`	`1rem`	16px
`5`	`--nu-space-5`	`1.25rem`	20px
`6`	`--nu-space-6`	`1.5rem`	24px
`8`	`--nu-space-8`	`2rem`	32px
`10`	`--nu-space-10`	`2.5rem`	40px
`12`	`--nu-space-12`	`3rem`	48px
`16`	`--nu-space-16`	`4rem`	64px
`20`	`--nu-space-20`	`5rem`	80px
`24`	`--nu-space-24`	`6rem`	96px
`32`	`--nu-space-32`	`8rem`	128px
`40`	`--nu-space-40`	`10rem`	160px
`48`	`--nu-space-48`	`12rem`	192px
`56`	`--nu-space-56`	`14rem`	224px
`64`	`--nu-space-64`	`16rem`	256px

A key that is not on the scale has no class and raises a compile error in mixins. For a size outside the scale, write a value with a unit in a mixin (width(18rem)), or add a key to $spacings (see Configuration).

Width

Fixed widths from the scale

w-16

w-32

w-64

HTML
SCSS

<div class="space-y-2">
  <div class="w-16 p-2 bg-brand-subtle rounded">w-16</div>
  <div class="w-32 p-2 bg-brand-subtle rounded">w-32</div>
  <div class="w-64 p-2 bg-brand-subtle rounded">w-64</div>
</div>

.thumb {
  @include apply(width(16));
}
.sidebar {
  @include apply(width(64));
}

Height

<div class="flex gap-4 x-end">
  <div class="w-16 h-8 bg-brand-subtle rounded"></div>
  <div class="w-16 h-16 bg-brand-subtle rounded"></div>
  <div class="w-16 h-24 bg-brand-subtle rounded"></div>
  <div class="w-16 h-32 bg-brand-subtle rounded"></div>
</div>

h-full (height: 100%) fills a parent that has a definite height. h-screen is 100dvh, the dynamic viewport height, which stays correct when mobile browser toolbars show and hide.

h-full inside h-32

<div class="h-32 p-2 bg-alternate rounded">
  <div class="h-full p-2 bg-surface border rounded">h-full inside h-32</div>
</div>

Percentages

Percentage classes take their value from $percentages: 0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90 and 100. Thirds are written 33p and 66p and give exactly 33% and 66%.

w-25p

w-50p

w-75p

w-100p

HTML
SCSS

<div class="space-y-2">
  <div class="w-25p p-2 bg-brand-subtle rounded">w-25p</div>
  <div class="w-50p p-2 bg-brand-subtle rounded">w-50p</div>
  <div class="w-75p p-2 bg-brand-subtle rounded">w-75p</div>
  <div class="w-100p p-2 bg-brand-subtle rounded">w-100p</div>
</div>

.column {
  @include apply(width-percent(50));
}
.chart {
  @include apply(height-percent(75));
}

w-100p and w-full give the same declaration. Use whichever reads better next to the other classes on the element.

Minimum and maximum sizes

min-* and max-* classes accept the same scale keys and percentages as w-* and h-*. min-w-0 is useful on flex children that contain long text: it lets them shrink below their content width.

max-w-48: this text wraps once it reaches twelve rem

min-w-48 w-fit

<div class="space-y-2">
  <div class="max-w-48 p-2 bg-brand-subtle rounded">max-w-48: this text wraps once it reaches twelve rem</div>
  <div class="min-w-48 w-fit p-2 bg-brand-subtle rounded">min-w-48 w-fit</div>
</div>

Breakpoint widths

w-{breakpoint}, min-w-{breakpoint} and max-w-{breakpoint} use the pixel width of each breakpoint. Combined with mx-auto, max-w-* gives a centred, readable column.

max-w-xs mx-auto

HTML
SCSS

<div class="bg-alternate rounded p-2">
  <div class="max-w-xs mx-auto p-3 bg-surface border rounded">max-w-xs mx-auto</div>
</div>

.article {
  @include apply(max-width(48rem), mx(auto));
}

Suffix	Media query
`@xs`	`@media (min-width: 480px)`
`@sm`	`@media (min-width: 640px)`
`@md`	`@media (min-width: 768px)`
`@lg`	`@media (min-width: 1024px)`
`@xl`	`@media (min-width: 1280px)`
`@2xl`	`@media (min-width: 1536px)`

There are no height classes for breakpoints and no responsive variants of the breakpoint width classes.

Keywords

Class	Declaration
`w-auto`, `h-auto`	`width: auto`, `height: auto`
`w-full`, `h-full`	`width: 100%`, `height: 100%`
`w-screen`	`width: 100vw`
`h-screen`	`height: 100dvh`
`w-min`, `h-min`	`min-content`
`w-max`, `h-max`	`max-content`
`w-fit`, `h-fit`	`fit-content`
`min-w-full`, `max-w-full`	`min-width: 100%`, `max-width: 100%`
`min-h-full`, `max-h-full`	`min-height: 100%`, `max-height: 100%`

Content keywords

w-min wraps at every word

w-fit shrinks to its content

w-max never wraps, even when the line is longer than the container

<div class="space-y-2">
  <div class="w-min p-2 bg-brand-subtle rounded">w-min wraps at every word</div>
  <div class="w-fit p-2 bg-brand-subtle rounded">w-fit shrinks to its content</div>
  <div class="w-max p-2 bg-brand-subtle rounded">w-max never wraps, even when the line is longer than the container</div>
</div>

w-max can overflow its container. Prefer w-fit, which shrinks to the content but never grows past the available space. w-screen includes the width of a vertical scrollbar, so it can cause a horizontal scrollbar on desktop browsers; prefer w-full for full-width blocks inside the page.

State variants

Scale width and height classes have hover: and group-hover: variants: hover:w-32, group-hover:h-16. A group-hover: class applies when the nearest ancestor with the group class is hovered.

Hover this panel

<div class="group p-3 bg-alternate rounded">
  <div class="w-16 group-hover:w-64 h-8 bg-brand rounded"></div>
  <div class="mt-2">Hover this panel</div>
</div>

Percentage width and height classes have these variants only in their responsive form (hover:w-50p@md). Minimum, maximum, keyword and breakpoint width classes have no state variants. Changing a size on hover moves surrounding content, so keep it for decorative elements.

Responsive variants

These sizing classes have responsive variants with an @{breakpoint} suffix: scale keys and percentages for every prefix (w-32@md, max-h-50p@lg), and the keywords auto, full, min, max and fit for width and height (w-full@md). Variants apply from their breakpoint upwards.

w-full w-50p@md w-25p@lg: resize the window

HTML
SCSS

<div class="w-full w-50p@md w-25p@lg p-2 bg-brand-subtle rounded">
  w-full w-50p@md w-25p@lg: resize the window
</div>

.panel {
  @include apply(w-full, width-percent(50) md, width-percent(25) lg);
}

w-screen, h-screen, min-*-full, max-*-full and the breakpoint width classes have no responsive variants.

SCSS

Every class has a mixin. Fixed sizes use width(), height(), min-width(), min-height(), max-width() and max-height(); percentages use the -percent mixins; keyword classes have mixins of the same name.

@use "@nuvoui/core" as *;

.card {
  @include apply(width(64), min-height(32), max-width(100%), w-full md);
}

.card {
  width: var(--nu-space-64);
  min-height: var(--nu-space-32);
  max-width: 100%;
}
@media (min-width: 768px) {
  .card {
    width: 100%;
  }
}

Keys and custom values

A unitless number is a spacing key: width(16) is var(--nu-space-16), the same as .w-16. A value with a unit is used as written, and calc() and var() pass through.

.dialog {
  @include apply(width(32rem), max-width(calc(100% - 2rem)), height(fit-content));
}

Mixin	Accepts
`width()`, `height()`, `min-width()`, `min-height()`	A spacing key, a value with a unit, `calc()`, `var()`, `auto`, `min-content`, `max-content`, `fit-content` or a CSS-wide keyword
`max-width()`, `max-height()`	The same, plus `none`
`width-percent()` and the other `-percent` mixins	A unitless number (`50` gives `50%`) or a percentage (`50%`)
`w-full`, `w-max`, `h-screen` and the other keyword mixins	No argument

The breakpoint widths are not keys of the sizing mixins: max-width(md) is an error. Read the map when you need a breakpoint width in SCSS.

@use "sass:map";
@use "@nuvoui/core" as *;

.page {
  @include apply(max-width(map.get($breakpoints, lg)), mx(auto));
}

Tokens in your own CSS

.avatar {
  width: token(space-12);
  height: token(space-12);
}

Configuration

Fixed sizes follow $spacings, percentage classes follow $percentages, and breakpoint width classes follow $breakpoints. Each map replaces the default map; it is not merged.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $percentages: (0, 25, 33, 50, 66, 75, 100)
);

Changing $spacings changes padding, margin, gap and sizing together. See Spacing configuration for the keys the base styles need.

Errors

Sizing mixins fail at compile time instead of emitting broken CSS.

Input	Error
`width(300)`	`width: 300 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (300px, 300rem).`
`width(-4)`	`width: negative key -4 is not allowed here. Negative keys work for margin, inset, offsets, translate and space only.`
`height(-4px)`	`height: negative value -4px is not allowed here. Negative values work for margin, inset, offsets, translate and space only.`
`width(foo)`	`width: unknown value foo. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a value with a CSS unit, calc(), var() or a keyword (auto, min-content, max-content, fit-content, inherit, initial, unset, revert, revert-layer).`
`min-width(none)`	`min-width: unknown value none. ...` (`none` is valid for `max-width()` and `max-height()` only)
`width-percent(1rem)`	`width-percent: 1rem is not a percentage. Use a number (50) or a percentage (50%).`

CSS variables

Variable	Description
`--nu-space-{key}`	Used by every fixed sizing class and mixin. See Scale.

Percentages, breakpoint widths and keywords are emitted as plain values, not tokens.

Class reference

Generated from the compiled core build. Responsive variants are not listed.

Width (46 rules)

Selector	Declarations	Default value
`.w-screen`	`width: 100vw`	`100vw`
`.w-auto`	`width: auto`	`auto`
`.w-full`	`width: 100%`	`100%`
`.w-max`	`width: max-content`	`max-content`
`.w-min`	`width: min-content`	`min-content`
`.w-fit`	`width: fit-content`	`fit-content`
`.w-0p, .hover:w-0p:hover, .group:hover .group-hover:w-0p`	`width: 0%`	`0%`
`.w-5p, .hover:w-5p:hover, .group:hover .group-hover:w-5p`	`width: 5%`	`5%`
`.w-10p, .hover:w-10p:hover, .group:hover .group-hover:w-10p`	`width: 10%`	`10%`
`.w-20p, .hover:w-20p:hover, .group:hover .group-hover:w-20p`	`width: 20%`	`20%`
`.w-25p, .hover:w-25p:hover, .group:hover .group-hover:w-25p`	`width: 25%`	`25%`
`.w-30p, .hover:w-30p:hover, .group:hover .group-hover:w-30p`	`width: 30%`	`30%`
`.w-33p, .hover:w-33p:hover, .group:hover .group-hover:w-33p`	`width: 33.333%`	`33.333%`
`.w-40p, .hover:w-40p:hover, .group:hover .group-hover:w-40p`	`width: 40%`	`40%`
`.w-50p, .hover:w-50p:hover, .group:hover .group-hover:w-50p`	`width: 50%`	`50%`
`.w-60p, .hover:w-60p:hover, .group:hover .group-hover:w-60p`	`width: 60%`	`60%`
`.w-66p, .hover:w-66p:hover, .group:hover .group-hover:w-66p`	`width: 66.667%`	`66.667%`
`.w-70p, .hover:w-70p:hover, .group:hover .group-hover:w-70p`	`width: 70%`	`70%`
`.w-75p, .hover:w-75p:hover, .group:hover .group-hover:w-75p`	`width: 75%`	`75%`
`.w-80p, .hover:w-80p:hover, .group:hover .group-hover:w-80p`	`width: 80%`	`80%`
`.w-90p, .hover:w-90p:hover, .group:hover .group-hover:w-90p`	`width: 90%`	`90%`
`.w-100p, .hover:w-100p:hover, .group:hover .group-hover:w-100p`	`width: 100%`	`100%`
`.w-0, .hover:w-0:hover, .group:hover .group-hover:w-0`	`width: var(--nu-space-0)`	`0`
`.w-1, .hover:w-1:hover, .group:hover .group-hover:w-1`	`width: var(--nu-space-1)`	`0.25rem`
`.w-2, .hover:w-2:hover, .group:hover .group-hover:w-2`	`width: var(--nu-space-2)`	`0.5rem`
`.w-3, .hover:w-3:hover, .group:hover .group-hover:w-3`	`width: var(--nu-space-3)`	`0.75rem`
`.w-4, .hover:w-4:hover, .group:hover .group-hover:w-4`	`width: var(--nu-space-4)`	`1rem`
`.w-5, .hover:w-5:hover, .group:hover .group-hover:w-5`	`width: var(--nu-space-5)`	`1.25rem`
`.w-6, .hover:w-6:hover, .group:hover .group-hover:w-6`	`width: var(--nu-space-6)`	`1.5rem`
`.w-8, .hover:w-8:hover, .group:hover .group-hover:w-8`	`width: var(--nu-space-8)`	`2rem`
`.w-10, .hover:w-10:hover, .group:hover .group-hover:w-10`	`width: var(--nu-space-10)`	`2.5rem`
`.w-12, .hover:w-12:hover, .group:hover .group-hover:w-12`	`width: var(--nu-space-12)`	`3rem`
`.w-16, .hover:w-16:hover, .group:hover .group-hover:w-16`	`width: var(--nu-space-16)`	`4rem`
`.w-20, .hover:w-20:hover, .group:hover .group-hover:w-20`	`width: var(--nu-space-20)`	`5rem`
`.w-24, .hover:w-24:hover, .group:hover .group-hover:w-24`	`width: var(--nu-space-24)`	`6rem`
`.w-32, .hover:w-32:hover, .group:hover .group-hover:w-32`	`width: var(--nu-space-32)`	`8rem`
`.w-40, .hover:w-40:hover, .group:hover .group-hover:w-40`	`width: var(--nu-space-40)`	`10rem`
`.w-48, .hover:w-48:hover, .group:hover .group-hover:w-48`	`width: var(--nu-space-48)`	`12rem`
`.w-56, .hover:w-56:hover, .group:hover .group-hover:w-56`	`width: var(--nu-space-56)`	`14rem`
`.w-64, .hover:w-64:hover, .group:hover .group-hover:w-64`	`width: var(--nu-space-64)`	`16rem`
`.w-xs`	`width: 480px`	`480px`
`.w-sm`	`width: 640px`	`640px`
`.w-md`	`width: 768px`	`768px`
`.w-lg`	`width: 1024px`	`1024px`
`.w-xl`	`width: 1280px`	`1280px`
`.w-2xl`	`width: 1536px`	`1536px`

Height (40 rules)

Selector	Declarations	Default value
`.h-screen`	`height: 100dvh`	`100dvh`
`.h-auto`	`height: auto`	`auto`
`.h-full`	`height: 100%`	`100%`
`.h-max`	`height: max-content`	`max-content`
`.h-min`	`height: min-content`	`min-content`
`.h-fit`	`height: fit-content`	`fit-content`
`.h-0p, .hover:h-0p:hover, .group:hover .group-hover:h-0p`	`height: 0%`	`0%`
`.h-5p, .hover:h-5p:hover, .group:hover .group-hover:h-5p`	`height: 5%`	`5%`
`.h-10p, .hover:h-10p:hover, .group:hover .group-hover:h-10p`	`height: 10%`	`10%`
`.h-20p, .hover:h-20p:hover, .group:hover .group-hover:h-20p`	`height: 20%`	`20%`
`.h-25p, .hover:h-25p:hover, .group:hover .group-hover:h-25p`	`height: 25%`	`25%`
`.h-30p, .hover:h-30p:hover, .group:hover .group-hover:h-30p`	`height: 30%`	`30%`
`.h-33p, .hover:h-33p:hover, .group:hover .group-hover:h-33p`	`height: 33.333%`	`33.333%`
`.h-40p, .hover:h-40p:hover, .group:hover .group-hover:h-40p`	`height: 40%`	`40%`
`.h-50p, .hover:h-50p:hover, .group:hover .group-hover:h-50p`	`height: 50%`	`50%`
`.h-60p, .hover:h-60p:hover, .group:hover .group-hover:h-60p`	`height: 60%`	`60%`
`.h-66p, .hover:h-66p:hover, .group:hover .group-hover:h-66p`	`height: 66.667%`	`66.667%`
`.h-70p, .hover:h-70p:hover, .group:hover .group-hover:h-70p`	`height: 70%`	`70%`
`.h-75p, .hover:h-75p:hover, .group:hover .group-hover:h-75p`	`height: 75%`	`75%`
`.h-80p, .hover:h-80p:hover, .group:hover .group-hover:h-80p`	`height: 80%`	`80%`
`.h-90p, .hover:h-90p:hover, .group:hover .group-hover:h-90p`	`height: 90%`	`90%`
`.h-100p, .hover:h-100p:hover, .group:hover .group-hover:h-100p`	`height: 100%`	`100%`
`.h-0, .hover:h-0:hover, .group:hover .group-hover:h-0`	`height: var(--nu-space-0)`	`0`
`.h-1, .hover:h-1:hover, .group:hover .group-hover:h-1`	`height: var(--nu-space-1)`	`0.25rem`
`.h-2, .hover:h-2:hover, .group:hover .group-hover:h-2`	`height: var(--nu-space-2)`	`0.5rem`
`.h-3, .hover:h-3:hover, .group:hover .group-hover:h-3`	`height: var(--nu-space-3)`	`0.75rem`
`.h-4, .hover:h-4:hover, .group:hover .group-hover:h-4`	`height: var(--nu-space-4)`	`1rem`
`.h-5, .hover:h-5:hover, .group:hover .group-hover:h-5`	`height: var(--nu-space-5)`	`1.25rem`
`.h-6, .hover:h-6:hover, .group:hover .group-hover:h-6`	`height: var(--nu-space-6)`	`1.5rem`
`.h-8, .hover:h-8:hover, .group:hover .group-hover:h-8`	`height: var(--nu-space-8)`	`2rem`
`.h-10, .hover:h-10:hover, .group:hover .group-hover:h-10`	`height: var(--nu-space-10)`	`2.5rem`
`.h-12, .hover:h-12:hover, .group:hover .group-hover:h-12`	`height: var(--nu-space-12)`	`3rem`
`.h-16, .hover:h-16:hover, .group:hover .group-hover:h-16`	`height: var(--nu-space-16)`	`4rem`
`.h-20, .hover:h-20:hover, .group:hover .group-hover:h-20`	`height: var(--nu-space-20)`	`5rem`
`.h-24, .hover:h-24:hover, .group:hover .group-hover:h-24`	`height: var(--nu-space-24)`	`6rem`
`.h-32, .hover:h-32:hover, .group:hover .group-hover:h-32`	`height: var(--nu-space-32)`	`8rem`
`.h-40, .hover:h-40:hover, .group:hover .group-hover:h-40`	`height: var(--nu-space-40)`	`10rem`
`.h-48, .hover:h-48:hover, .group:hover .group-hover:h-48`	`height: var(--nu-space-48)`	`12rem`
`.h-56, .hover:h-56:hover, .group:hover .group-hover:h-56`	`height: var(--nu-space-56)`	`14rem`
`.h-64, .hover:h-64:hover, .group:hover .group-hover:h-64`	`height: var(--nu-space-64)`	`16rem`

Minimum width (41 rules)

Selector	Declarations	Default value
`.min-w-full`	`min-width: 100%`	`100%`
`.min-w-0p`	`min-width: 0%`	`0%`
`.min-w-5p`	`min-width: 5%`	`5%`
`.min-w-10p`	`min-width: 10%`	`10%`
`.min-w-20p`	`min-width: 20%`	`20%`
`.min-w-25p`	`min-width: 25%`	`25%`
`.min-w-30p`	`min-width: 30%`	`30%`
`.min-w-33p`	`min-width: 33.333%`	`33.333%`
`.min-w-40p`	`min-width: 40%`	`40%`
`.min-w-50p`	`min-width: 50%`	`50%`
`.min-w-60p`	`min-width: 60%`	`60%`
`.min-w-66p`	`min-width: 66.667%`	`66.667%`
`.min-w-70p`	`min-width: 70%`	`70%`
`.min-w-75p`	`min-width: 75%`	`75%`
`.min-w-80p`	`min-width: 80%`	`80%`
`.min-w-90p`	`min-width: 90%`	`90%`
`.min-w-100p`	`min-width: 100%`	`100%`
`.min-w-0`	`min-width: var(--nu-space-0)`	`0`
`.min-w-1`	`min-width: var(--nu-space-1)`	`0.25rem`
`.min-w-2`	`min-width: var(--nu-space-2)`	`0.5rem`
`.min-w-3`	`min-width: var(--nu-space-3)`	`0.75rem`
`.min-w-4`	`min-width: var(--nu-space-4)`	`1rem`
`.min-w-5`	`min-width: var(--nu-space-5)`	`1.25rem`
`.min-w-6`	`min-width: var(--nu-space-6)`	`1.5rem`
`.min-w-8`	`min-width: var(--nu-space-8)`	`2rem`
`.min-w-10`	`min-width: var(--nu-space-10)`	`2.5rem`
`.min-w-12`	`min-width: var(--nu-space-12)`	`3rem`
`.min-w-16`	`min-width: var(--nu-space-16)`	`4rem`
`.min-w-20`	`min-width: var(--nu-space-20)`	`5rem`
`.min-w-24`	`min-width: var(--nu-space-24)`	`6rem`
`.min-w-32`	`min-width: var(--nu-space-32)`	`8rem`
`.min-w-40`	`min-width: var(--nu-space-40)`	`10rem`
`.min-w-48`	`min-width: var(--nu-space-48)`	`12rem`
`.min-w-56`	`min-width: var(--nu-space-56)`	`14rem`
`.min-w-64`	`min-width: var(--nu-space-64)`	`16rem`
`.min-w-xs`	`min-width: 480px`	`480px`
`.min-w-sm`	`min-width: 640px`	`640px`
`.min-w-md`	`min-width: 768px`	`768px`
`.min-w-lg`	`min-width: 1024px`	`1024px`
`.min-w-xl`	`min-width: 1280px`	`1280px`
`.min-w-2xl`	`min-width: 1536px`	`1536px`

Minimum height (35 rules)

Selector	Declarations	Default value
`.min-h-full`	`min-height: 100%`	`100%`
`.min-h-0p`	`min-height: 0%`	`0%`
`.min-h-5p`	`min-height: 5%`	`5%`
`.min-h-10p`	`min-height: 10%`	`10%`
`.min-h-20p`	`min-height: 20%`	`20%`
`.min-h-25p`	`min-height: 25%`	`25%`
`.min-h-30p`	`min-height: 30%`	`30%`
`.min-h-33p`	`min-height: 33.333%`	`33.333%`
`.min-h-40p`	`min-height: 40%`	`40%`
`.min-h-50p`	`min-height: 50%`	`50%`
`.min-h-60p`	`min-height: 60%`	`60%`
`.min-h-66p`	`min-height: 66.667%`	`66.667%`
`.min-h-70p`	`min-height: 70%`	`70%`
`.min-h-75p`	`min-height: 75%`	`75%`
`.min-h-80p`	`min-height: 80%`	`80%`
`.min-h-90p`	`min-height: 90%`	`90%`
`.min-h-100p`	`min-height: 100%`	`100%`
`.min-h-0`	`min-height: var(--nu-space-0)`	`0`
`.min-h-1`	`min-height: var(--nu-space-1)`	`0.25rem`
`.min-h-2`	`min-height: var(--nu-space-2)`	`0.5rem`
`.min-h-3`	`min-height: var(--nu-space-3)`	`0.75rem`
`.min-h-4`	`min-height: var(--nu-space-4)`	`1rem`
`.min-h-5`	`min-height: var(--nu-space-5)`	`1.25rem`
`.min-h-6`	`min-height: var(--nu-space-6)`	`1.5rem`
`.min-h-8`	`min-height: var(--nu-space-8)`	`2rem`
`.min-h-10`	`min-height: var(--nu-space-10)`	`2.5rem`
`.min-h-12`	`min-height: var(--nu-space-12)`	`3rem`
`.min-h-16`	`min-height: var(--nu-space-16)`	`4rem`
`.min-h-20`	`min-height: var(--nu-space-20)`	`5rem`
`.min-h-24`	`min-height: var(--nu-space-24)`	`6rem`
`.min-h-32`	`min-height: var(--nu-space-32)`	`8rem`
`.min-h-40`	`min-height: var(--nu-space-40)`	`10rem`
`.min-h-48`	`min-height: var(--nu-space-48)`	`12rem`
`.min-h-56`	`min-height: var(--nu-space-56)`	`14rem`
`.min-h-64`	`min-height: var(--nu-space-64)`	`16rem`

Maximum width (41 rules)

Selector	Declarations	Default value
`.max-w-full`	`max-width: 100%`	`100%`
`.max-w-0p`	`max-width: 0%`	`0%`
`.max-w-5p`	`max-width: 5%`	`5%`
`.max-w-10p`	`max-width: 10%`	`10%`
`.max-w-20p`	`max-width: 20%`	`20%`
`.max-w-25p`	`max-width: 25%`	`25%`
`.max-w-30p`	`max-width: 30%`	`30%`
`.max-w-33p`	`max-width: 33.333%`	`33.333%`
`.max-w-40p`	`max-width: 40%`	`40%`
`.max-w-50p`	`max-width: 50%`	`50%`
`.max-w-60p`	`max-width: 60%`	`60%`
`.max-w-66p`	`max-width: 66.667%`	`66.667%`
`.max-w-70p`	`max-width: 70%`	`70%`
`.max-w-75p`	`max-width: 75%`	`75%`
`.max-w-80p`	`max-width: 80%`	`80%`
`.max-w-90p`	`max-width: 90%`	`90%`
`.max-w-100p`	`max-width: 100%`	`100%`
`.max-w-0`	`max-width: var(--nu-space-0)`	`0`
`.max-w-1`	`max-width: var(--nu-space-1)`	`0.25rem`
`.max-w-2`	`max-width: var(--nu-space-2)`	`0.5rem`
`.max-w-3`	`max-width: var(--nu-space-3)`	`0.75rem`
`.max-w-4`	`max-width: var(--nu-space-4)`	`1rem`
`.max-w-5`	`max-width: var(--nu-space-5)`	`1.25rem`
`.max-w-6`	`max-width: var(--nu-space-6)`	`1.5rem`
`.max-w-8`	`max-width: var(--nu-space-8)`	`2rem`
`.max-w-10`	`max-width: var(--nu-space-10)`	`2.5rem`
`.max-w-12`	`max-width: var(--nu-space-12)`	`3rem`
`.max-w-16`	`max-width: var(--nu-space-16)`	`4rem`
`.max-w-20`	`max-width: var(--nu-space-20)`	`5rem`
`.max-w-24`	`max-width: var(--nu-space-24)`	`6rem`
`.max-w-32`	`max-width: var(--nu-space-32)`	`8rem`
`.max-w-40`	`max-width: var(--nu-space-40)`	`10rem`
`.max-w-48`	`max-width: var(--nu-space-48)`	`12rem`
`.max-w-56`	`max-width: var(--nu-space-56)`	`14rem`
`.max-w-64`	`max-width: var(--nu-space-64)`	`16rem`
`.max-w-xs`	`max-width: 480px`	`480px`
`.max-w-sm`	`max-width: 640px`	`640px`
`.max-w-md`	`max-width: 768px`	`768px`
`.max-w-lg`	`max-width: 1024px`	`1024px`
`.max-w-xl`	`max-width: 1280px`	`1280px`
`.max-w-2xl`	`max-width: 1536px`	`1536px`

Maximum height (35 rules)

Selector	Declarations	Default value
`.max-h-full`	`max-height: 100%`	`100%`
`.max-h-0p`	`max-height: 0%`	`0%`
`.max-h-5p`	`max-height: 5%`	`5%`
`.max-h-10p`	`max-height: 10%`	`10%`
`.max-h-20p`	`max-height: 20%`	`20%`
`.max-h-25p`	`max-height: 25%`	`25%`
`.max-h-30p`	`max-height: 30%`	`30%`
`.max-h-33p`	`max-height: 33.333%`	`33.333%`
`.max-h-40p`	`max-height: 40%`	`40%`
`.max-h-50p`	`max-height: 50%`	`50%`
`.max-h-60p`	`max-height: 60%`	`60%`
`.max-h-66p`	`max-height: 66.667%`	`66.667%`
`.max-h-70p`	`max-height: 70%`	`70%`
`.max-h-75p`	`max-height: 75%`	`75%`
`.max-h-80p`	`max-height: 80%`	`80%`
`.max-h-90p`	`max-height: 90%`	`90%`
`.max-h-100p`	`max-height: 100%`	`100%`
`.max-h-0`	`max-height: var(--nu-space-0)`	`0`
`.max-h-1`	`max-height: var(--nu-space-1)`	`0.25rem`
`.max-h-2`	`max-height: var(--nu-space-2)`	`0.5rem`
`.max-h-3`	`max-height: var(--nu-space-3)`	`0.75rem`
`.max-h-4`	`max-height: var(--nu-space-4)`	`1rem`
`.max-h-5`	`max-height: var(--nu-space-5)`	`1.25rem`
`.max-h-6`	`max-height: var(--nu-space-6)`	`1.5rem`
`.max-h-8`	`max-height: var(--nu-space-8)`	`2rem`
`.max-h-10`	`max-height: var(--nu-space-10)`	`2.5rem`
`.max-h-12`	`max-height: var(--nu-space-12)`	`3rem`
`.max-h-16`	`max-height: var(--nu-space-16)`	`4rem`
`.max-h-20`	`max-height: var(--nu-space-20)`	`5rem`
`.max-h-24`	`max-height: var(--nu-space-24)`	`6rem`
`.max-h-32`	`max-height: var(--nu-space-32)`	`8rem`
`.max-h-40`	`max-height: var(--nu-space-40)`	`10rem`
`.max-h-48`	`max-height: var(--nu-space-48)`	`12rem`
`.max-h-56`	`max-height: var(--nu-space-56)`	`14rem`
`.max-h-64`	`max-height: var(--nu-space-64)`	`16rem`

Accessibility and RTL

Sizes are not directional. Width and height mean the same in left-to-right and right-to-left layouts, so sizing needs no logical variants.
Let text grow. The scale is in rem, so fixed sizes grow with the user’s font size. For boxes that contain text, prefer min-h-* over h-* so content is not clipped when text is enlarged (WCAG 1.4.4 Resize Text).
Reflow. Prefer max-w-* and percentages over large fixed widths, so content fits at 320 CSS pixels and 400% zoom without horizontal scrolling (WCAG 1.4.10).
Target size. Interactive elements sized with w-* and h-* should be at least 24 by 24 CSS pixels (w-6 h-6), per WCAG 2.2, 2.5.8 Target Size.