Height

Use the spacing scale or a breakpoint. Height utilities also cover auto, full, viewport heights (screen, vh, svh, lvh, dvh), intrinsic heights (min, max, fit), fractions, and max-h-none.

Sass mixins

Mixin	CSS properties
h($key)	height from a size, breakpoint, fraction, or viewport keyword
min-h($key)	min-height from a size, breakpoint, fraction, or viewport keyword
max-h($key)	max-height from a size, breakpoint, fraction, or viewport keyword
h-full	height: 100%
h-screen	height: 100vh
h-auto	height: auto
h-fit	height: fit-content
h-min	height: min-content
h-max	height: max-content
min-h-full	min-height: 100%
max-h-full	max-height: 100%
max-h-none	max-height: none

Accepted keys

h(), min-h(), and max-h() accept:

• A size-scale, such as 24
• A breakpoint name, like "md"
• A fraction defined in $layout-divisions, like "1/2" or "2/3"
• A viewport keyword: "screen", "vh", "svh", "lvh", or "dvh"

scss

.panel {
  @include crayon.h("1/2");
  @include crayon.min-h(64);
  @include crayon.max-h("lg");
}

.full-viewport {
  @include crayon.h("dvh");
}

sass

.panel
  +crayon.h("1/2")
  +crayon.min-h(64)
  +crayon.max-h("lg")

.full-viewport
  +crayon.h("dvh")

Responsive range mixin

Pass a base size followed by named breakpoint overrides, such as crayon.h-range(24, $md: 48, $lg: 96).

Mixin	Purpose
h-range($base, $breakpoint-range...)	Responsive height

Utility classes

Class	Property
h-{size}	height: {size}
min-h-{size}	min-height: {size}
max-h-{size}	max-height: {size}
h-{breakpoint}	height: {breakpoint width}
min-h-{breakpoint}	min-height: {breakpoint width}
max-h-{breakpoint}	max-height: {breakpoint width}
h-{n}/{d}	height: {fraction}
min-h-{n}/{d}	min-height: {fraction}
max-h-{n}/{d}	max-height: {fraction}
h-auto	height: auto
h-full	height: 100%
h-screen	height: 100vh
h-vh	height: 100vh
h-svh	height: 100svh
h-lvh	height: 100lvh
h-dvh	height: 100dvh
h-min	height: min-content
h-max	height: max-content
h-fit	height: fit-content
min-h-0	min-height: 0
min-h-full	min-height: 100%
min-h-screen	min-height: 100vh
min-h-svh	min-height: 100svh
min-h-dvh	min-height: 100dvh
max-h-full	max-height: 100%
max-h-screen	max-height: 100vh
max-h-svh	max-height: 100svh
max-h-dvh	max-height: 100dvh
max-h-none	max-height: none

Examples

Sass mixins

scss

.panel {
  @include crayon.h(24);
  @include crayon.max-h(96);
}

sass

.panel
  +crayon.h(24)
  +crayon.max-h(96)

Utility classes

<div class="h-24 max-h-96">Constrained height</div>
<div class="min-h-1/2 max-h-2/3">Fractionally constrained height</div>
<div class="h-full">Full parent height</div>
<div class="h-screen">Viewport height</div>
<div class="h-vh">Viewport height alias</div>
<div class="h-dvh">Dynamic viewport height</div>

Sass functions

.panel {
  height: crayon.size(24);
  max-height: crayon.size(96);
}

CSS variables

.panel {
  height: var(--size-24);
  max-height: var(--size-96);
}