Heights
Utilities to control the heights of the elements
Basic
| Class | Properties |
|---|---|
| h-xs | height: var(--dash-size-xs); |
| h-sm | height: var(--dash-size-sm); |
| h-md | height: var(--dash-size-md); |
| h-lg | height: var(--dash-size-lg); |
| h-xl | height: var(--dash-size-xl); |
| h-2xl | height: var(--dash-size-2xl); |
| h-3xl | height: var(--dash-size-3xl); |
| h-4xl | height: var(--dash-size-4xl); |
| h-5xl | height: var(--dash-size-5xl); |
| h-6xl | height: var(--dash-size-6xl); |
| h-7xl | height: var(--dash-size-7xl); |
| h-8xl | height: var(--dash-size-8xl); |
| h-9xl | height: var(--dash-size-9xl); |
| h-full | height: var(--dash-size-full); |
| h-screen | height: var(--dash-size-screen); |
Min height
| Class | Properties |
|---|---|
| min-h-xs | min-height: var(--dash-size-xs); |
| min-h-sm | min-height: var(--dash-size-sm); |
| min-h-md | min-height: var(--dash-size-md); |
| min-h-lg | min-height: var(--dash-size-lg); |
| min-h-xl | min-height: var(--dash-size-xl); |
| min-h-2xl | min-height: var(--dash-size-2xl); |
| min-h-3xl | min-height: var(--dash-size-3xl); |
| min-h-4xl | min-height: var(--dash-size-4xl); |
| min-h-5xl | min-height: var(--dash-size-5xl); |
| min-h-6xl | min-height: var(--dash-size-6xl); |
| min-h-7xl | min-height: var(--dash-size-7xl); |
| min-h-8xl | min-height: var(--dash-size-8xl); |
| min-h-9xl | min-height: var(--dash-size-9xl); |
| min-h-full | min-height: var(--dash-size-full); |
| min-h-screen | min-height: var(--dash-size-screen); |
Max height
| Class | Properties |
|---|---|
| max-h-xs | max-height: var(--dash-size-xs); |
| max-h-sm | max-height: var(--dash-size-sm); |
| max-h-md | max-height: var(--dash-size-md); |
| max-h-lg | max-height: var(--dash-size-lg); |
| max-h-xl | max-height: var(--dash-size-xl); |
| max-h-2xl | max-height: var(--dash-size-2xl); |
| max-h-3xl | max-height: var(--dash-size-3xl); |
| max-h-4xl | max-height: var(--dash-size-4xl); |
| max-h-5xl | max-height: var(--dash-size-5xl); |
| max-h-6xl | max-height: var(--dash-size-6xl); |
| max-h-7xl | max-height: var(--dash-size-7xl); |
| max-h-8xl | max-height: var(--dash-size-8xl); |
| max-h-9xl | max-height: var(--dash-size-9xl); |
| max-h-full | max-height: var(--dash-size-full); |
| max-h-screen | max-height: var(--dash-size-screen); |
Percents
| Class | Properties |
|---|---|
| h-1/2 | height: 50% |
| h-1/3 | height: 33.333333% |
| h-2/3 | height: 66.666667% |
| h-1/4 | height: 25% |
| h-3/4 | height: 75% |
| h-1/5 | height: 20% |
| h-2/5 | height: 40% |
| h-3/5 | height: 60% |
| h-4/5 | height: 80% |
| h-1/6 | height: 16.666667% |
| h-5/6 | height: 83.333333% |
| h-1/12 | height: 8.333333% |
| h-5/12 | height: 41.666667% |
| h-7/12 | height: 58.333333% |
| h-11/12 | height: 91.666667% |