layout

top-right-bottom-left

Utilities for controlling the placement of positioned elements.

Overview

These are fluid <sizes>-based utilities.

ClassStyle
inset-<size>inset: var(--size-<size>);
top-<size>top: var(--size-<size>);
right-<size>right: var(--size-<size>);
bottom-<size>bottom: var(--size-<size>);
left-<size>left: var(--size-<size>);
In Depth
ClassStyle
inset-autoinset: var(--size-auto);
inset-zeroinset: var(--size-zero);
inset-3xsinset: var(--size-3xs);
inset-2xsinset: var(--size-2xs);
inset-xsinset: var(--size-xs);
inset-sminset: var(--size-sm);
inset-mdinset: var(--size-md);
inset-mlinset: var(--size-ml);
inset-lginset: var(--size-lg);
inset-xlinset: var(--size-xl);
inset-2xlinset: var(--size-2xl);
inset-3xlinset: var(--size-3xl);
inset-4xlinset: var(--size-4xl);
inset-5xlinset: var(--size-5xl);
inset-6xlinset: var(--size-6xl);
inset-7xlinset: var(--size-7xl);
inset-8xlinset: var(--size-8xl);
inset-9xlinset: var(--size-9xl);
inset-10xlinset: var(--size-10xl);
inset-maxinset: var(--size-max);
ClassStyle
top-autotop: var(--size-auto);
top-zerotop: var(--size-zero);
top-3xstop: var(--size-3xs);
top-2xstop: var(--size-2xs);
top-xstop: var(--size-xs);
top-smtop: var(--size-sm);
top-mdtop: var(--size-md);
top-mltop: var(--size-ml);
top-lgtop: var(--size-lg);
top-xltop: var(--size-xl);
top-2xltop: var(--size-2xl);
top-3xltop: var(--size-3xl);
top-4xltop: var(--size-4xl);
top-5xltop: var(--size-5xl);
top-6xltop: var(--size-6xl);
top-7xltop: var(--size-7xl);
top-8xltop: var(--size-8xl);
top-9xltop: var(--size-9xl);
top-10xltop: var(--size-10xl);
top-maxtop: var(--size-max);
ClassStyle
right-autoright: var(--size-auto);
right-zeroright: var(--size-zero);
right-3xsright: var(--size-3xs);
right-2xsright: var(--size-2xs);
right-xsright: var(--size-xs);
right-smright: var(--size-sm);
right-mdright: var(--size-md);
right-mlright: var(--size-ml);
right-lgright: var(--size-lg);
right-xlright: var(--size-xl);
right-2xlright: var(--size-2xl);
right-3xlright: var(--size-3xl);
right-4xlright: var(--size-4xl);
right-5xlright: var(--size-5xl);
right-6xlright: var(--size-6xl);
right-7xlright: var(--size-7xl);
right-8xlright: var(--size-8xl);
right-9xlright: var(--size-9xl);
right-10xlright: var(--size-10xl);
right-maxright: var(--size-max);
ClassStyle
bottom-autobottom: var(--size-auto);
bottom-zerobottom: var(--size-zero);
bottom-3xsbottom: var(--size-3xs);
bottom-2xsbottom: var(--size-2xs);
bottom-xsbottom: var(--size-xs);
bottom-smbottom: var(--size-sm);
bottom-mdbottom: var(--size-md);
bottom-mlbottom: var(--size-ml);
bottom-lgbottom: var(--size-lg);
bottom-xlbottom: var(--size-xl);
bottom-2xlbottom: var(--size-2xl);
bottom-3xlbottom: var(--size-3xl);
bottom-4xlbottom: var(--size-4xl);
bottom-5xlbottom: var(--size-5xl);
bottom-6xlbottom: var(--size-6xl);
bottom-7xlbottom: var(--size-7xl);
bottom-8xlbottom: var(--size-8xl);
bottom-9xlbottom: var(--size-9xl);
bottom-10xlbottom: var(--size-10xl);
bottom-maxbottom: var(--size-max);
ClassStyle
left-autoleft: var(--size-auto);
left-zeroleft: var(--size-zero);
left-3xsleft: var(--size-3xs);
left-2xsleft: var(--size-2xs);
left-xsleft: var(--size-xs);
left-smleft: var(--size-sm);
left-mdleft: var(--size-md);
left-mlleft: var(--size-ml);
left-lgleft: var(--size-lg);
left-xlleft: var(--size-xl);
left-2xlleft: var(--size-2xl);
left-3xlleft: var(--size-3xl);
left-4xlleft: var(--size-4xl);
left-5xlleft: var(--size-5xl);
left-6xlleft: var(--size-6xl);
left-7xlleft: var(--size-7xl);
left-8xlleft: var(--size-8xl);
left-9xlleft: var(--size-9xl);
left-10xlleft: var(--size-10xl);
left-maxleft: var(--size-max);