Skip to main content

Width

Utilities to control the width of the elements

Basic

ClassProperties
w-xswidth: var(--dash-size-xs);
w-smwidth: var(--dash-size-sm);
w-mdwidth: var(--dash-size-md);
w-lgwidth: var(--dash-size-lg);
w-xlwidth: var(--dash-size-xl);
w-2xlwidth: var(--dash-size-2xl);
w-3xlwidth: var(--dash-size-3xl);
w-4xlwidth: var(--dash-size-4xl);
w-5xlwidth: var(--dash-size-5xl);
w-6xlwidth: var(--dash-size-6xl);
w-7xlwidth: var(--dash-size-7xl);
w-8xlwidth: var(--dash-size-8xl);
w-9xlwidth: var(--dash-size-9xl);
w-fullwidth: var(--dash-size-full);
w-screenwidth: var(--dash-size-screen);

Min width

ClassProperties
min-w-xsmin-width: var(--dash-size-xs);
min-w-smmin-width: var(--dash-size-sm);
min-w-mdmin-width: var(--dash-size-md);
min-w-lgmin-width: var(--dash-size-lg);
min-w-xlmin-width: var(--dash-size-xl);
min-w-2xlmin-width: var(--dash-size-2xl);
min-w-3xlmin-width: var(--dash-size-3xl);
min-w-4xlmin-width: var(--dash-size-4xl);
min-w-5xlmin-width: var(--dash-size-5xl);
min-w-6xlmin-width: var(--dash-size-6xl);
min-w-7xlmin-width: var(--dash-size-7xl);
min-w-8xlmin-width: var(--dash-size-8xl);
min-w-9xlmin-width: var(--dash-size-9xl);
min-w-fullmin-width: var(--dash-size-full);
min-w-screenmin-width: var(--dash-size-screen);

Max width

ClassProperties
max-w-xsmax-width: var(--dash-size-xs);
max-w-smmax-width: var(--dash-size-sm);
max-w-mdmax-width: var(--dash-size-md);
max-w-lgmax-width: var(--dash-size-lg);
max-w-xlmax-width: var(--dash-size-xl);
max-w-2xlmax-width: var(--dash-size-2xl);
max-w-3xlmax-width: var(--dash-size-3xl);
max-w-4xlmax-width: var(--dash-size-4xl);
max-w-5xlmax-width: var(--dash-size-5xl);
max-w-6xlmax-width: var(--dash-size-6xl);
max-w-7xlmax-width: var(--dash-size-7xl);
max-w-8xlmax-width: var(--dash-size-8xl);
max-w-9xlmax-width: var(--dash-size-9xl);
max-w-fullmax-width: var(--dash-size-full);
max-w-screenmax-width: var(--dash-size-screen);

Percents

ClassProperties
w-1/2width: 50%
w-1/3width: 33.333333%
w-2/3width: 66.666667%
w-1/4width: 25%
w-3/4width: 75%
w-1/5width: 20%
w-2/5width: 40%
w-3/5width: 60%
w-4/5width: 80%
w-1/6width: 16.666667%
w-5/6width: 83.333333%
w-1/12width: 8.333333%
w-5/12width: 41.666667%
w-7/12width: 58.333333%
w-11/12width: 91.666667%