Monsoon v0.2.0
Made by Alexandre Kohler Star

Utilities

Sizing

Width, height, size, min and max dimensions, fractions and viewport units.

268classes
728variant classes
6properties
Open in the class reference

Live example

Full

Variant support

Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:w-0. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.

KindPrefixesClasses in this category
Statenot generated0
Group and peernot generated0
Structurenot generated0
Motionnot generated0
Schemenot generated0
Breakpointssm:md:lg:xl:2xl:94
Containers@xs:@sm:@md:@lg:@xl:14
Media and directionprint:screen:94

Width 92

Variants: listed per class

ClassCSSVariants
w-0width: 0;sm md lg xl 2xl print screen
w-1width: 0.25rem;sm md lg xl 2xl print screen
w-2width: 0.5rem;sm md lg xl 2xl print screen
w-3width: 0.75rem;sm md lg xl 2xl print screen
w-4width: 1rem;sm md lg xl 2xl print screen
w-5width: 1.25rem;sm md lg xl 2xl print screen
w-6width: 1.5rem;sm md lg xl 2xl print screen
w-7width: 1.75rem;sm md lg xl 2xl print screen
w-8width: 2rem;sm md lg xl 2xl print screen
w-9width: 2.25rem;sm md lg xl 2xl print screen
w-10width: 2.5rem;sm md lg xl 2xl print screen
w-11width: 2.75rem;sm md lg xl 2xl print screen
w-12width: 3rem;sm md lg xl 2xl print screen
w-14width: 3.5rem;sm md lg xl 2xl print screen
w-16width: 4rem;sm md lg xl 2xl print screen
w-20width: 5rem;sm md lg xl 2xl print screen
w-24width: 6rem;sm md lg xl 2xl print screen
w-28width: 7rem;sm md lg xl 2xl print screen
w-32width: 8rem;sm md lg xl 2xl print screen
w-36width: 9rem;sm md lg xl 2xl print screen
w-40width: 10rem;sm md lg xl 2xl print screen
w-44width: 11rem;sm md lg xl 2xl print screen
w-48width: 12rem;sm md lg xl 2xl print screen
w-56width: 14rem;sm md lg xl 2xl print screen
w-64width: 16rem;sm md lg xl 2xl print screen
w-72width: 18rem;sm md lg xl 2xl print screen
w-80width: 20rem;sm md lg xl 2xl print screen
w-96width: 24rem;sm md lg xl 2xl print screen
w-pxwidth: 1px;sm md lg xl 2xl print screen
w-0.5width: 0.125rem;sm md lg xl 2xl print screen
w-1.5width: 0.375rem;sm md lg xl 2xl print screen
w-2.5width: 0.625rem;sm md lg xl 2xl print screen
w-3.5width: 0.875rem;sm md lg xl 2xl print screen
w-1/2width: 50%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-1/3width: 33.333333%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-2/3width: 66.666667%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-1/4width: 25%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-2/4width: 50%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-3/4width: 75%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-1/5width: 20%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-2/5width: 40%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-3/5width: 60%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-4/5width: 80%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-1/6width: 16.666667%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-5/6width: 83.333333%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-autowidth: auto;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-fullwidth: 100%;sm md lg xl 2xl @xs @sm @md @lg @xl print screen
w-minwidth: min-content;sm md lg xl 2xl print screen
w-maxwidth: max-content;sm md lg xl 2xl print screen
w-fitwidth: fit-content;sm md lg xl 2xl print screen
w-screenwidth: 100vw;sm md lg xl 2xl print screen
w-svwwidth: 100svw;
w-lvwwidth: 100lvw;
w-dvwwidth: 100dvw;
size-0width: 0; height: 0;
size-1width: 0.25rem; height: 0.25rem;
size-2width: 0.5rem; height: 0.5rem;
size-3width: 0.75rem; height: 0.75rem;
size-4width: 1rem; height: 1rem;
size-5width: 1.25rem; height: 1.25rem;
size-6width: 1.5rem; height: 1.5rem;
size-7width: 1.75rem; height: 1.75rem;
size-8width: 2rem; height: 2rem;
size-9width: 2.25rem; height: 2.25rem;
size-10width: 2.5rem; height: 2.5rem;
size-11width: 2.75rem; height: 2.75rem;
size-12width: 3rem; height: 3rem;
size-14width: 3.5rem; height: 3.5rem;
size-16width: 4rem; height: 4rem;
size-20width: 5rem; height: 5rem;
size-24width: 6rem; height: 6rem;
size-28width: 7rem; height: 7rem;
size-32width: 8rem; height: 8rem;
size-36width: 9rem; height: 9rem;
size-40width: 10rem; height: 10rem;
size-44width: 11rem; height: 11rem;
size-48width: 12rem; height: 12rem;
size-56width: 14rem; height: 14rem;
size-64width: 16rem; height: 16rem;
size-72width: 18rem; height: 18rem;
size-80width: 20rem; height: 20rem;
size-96width: 24rem; height: 24rem;
size-pxwidth: 1px; height: 1px;
size-0.5width: 0.125rem; height: 0.125rem;
size-1.5width: 0.375rem; height: 0.375rem;
size-2.5width: 0.625rem; height: 0.625rem;
size-3.5width: 0.875rem; height: 0.875rem;
size-autowidth: auto; height: auto;
size-fullwidth: 100%; height: 100%;
size-minwidth: min-content; height: min-content;
size-maxwidth: max-content; height: max-content;
size-fitwidth: fit-content; height: fit-content;

Height 54

Variants: listed per class

ClassCSSVariants
h-0height: 0;
h-1height: 0.25rem;
h-2height: 0.5rem;
h-3height: 0.75rem;
h-4height: 1rem;
h-5height: 1.25rem;
h-6height: 1.5rem;
h-7height: 1.75rem;
h-8height: 2rem;
h-9height: 2.25rem;
h-10height: 2.5rem;
h-11height: 2.75rem;
h-12height: 3rem;
h-14height: 3.5rem;
h-16height: 4rem;
h-20height: 5rem;
h-24height: 6rem;
h-28height: 7rem;
h-32height: 8rem;
h-36height: 9rem;
h-40height: 10rem;
h-44height: 11rem;
h-48height: 12rem;
h-56height: 14rem;
h-64height: 16rem;
h-72height: 18rem;
h-80height: 20rem;
h-96height: 24rem;
h-pxheight: 1px;
h-0.5height: 0.125rem;
h-1.5height: 0.375rem;
h-2.5height: 0.625rem;
h-3.5height: 0.875rem;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-5/6height: 83.333333%;
h-autoheight: auto;sm md lg xl 2xl print screen
h-fullheight: 100%;sm md lg xl 2xl print screen
h-minheight: min-content;sm md lg xl 2xl print screen
h-maxheight: max-content;sm md lg xl 2xl print screen
h-fitheight: fit-content;sm md lg xl 2xl print screen
h-screenheight: 100vh;sm md lg xl 2xl print screen
h-svhheight: 100svh;
h-lvhheight: 100lvh;
h-dvhheight: 100dvh;

Min width 20

Variants: none

ClassCSS
min-w-0min-width: 0;
min-w-8min-width: 2rem;
min-w-10min-width: 2.5rem;
min-w-12min-width: 3rem;
min-w-16min-width: 4rem;
min-w-20min-width: 5rem;
min-w-24min-width: 6rem;
min-w-32min-width: 8rem;
min-w-40min-width: 10rem;
min-w-48min-width: 12rem;
min-w-64min-width: 16rem;
min-w-72min-width: 18rem;
min-w-80min-width: 20rem;
min-w-96min-width: 24rem;
min-w-pxmin-width: 1px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-fitmin-width: fit-content;
min-w-screenmin-width: 100vw;

Max width 37

Variants: sm:md:lg:xl:2xl:print:screen:

ClassCSS
max-w-0max-width: 0;
max-w-8max-width: 2rem;
max-w-12max-width: 3rem;
max-w-16max-width: 4rem;
max-w-24max-width: 6rem;
max-w-32max-width: 8rem;
max-w-40max-width: 10rem;
max-w-48max-width: 12rem;
max-w-64max-width: 16rem;
max-w-72max-width: 18rem;
max-w-80max-width: 20rem;
max-w-96max-width: 24rem;
max-w-nonemax-width: none;
max-w-pxmax-width: 1px;
max-w-fullmax-width: 100%;
max-w-minmax-width: min-content;
max-w-maxmax-width: max-content;
max-w-fitmax-width: fit-content;
max-w-prosemax-width: 65ch;
max-w-3xsmax-width: 16rem;
max-w-2xsmax-width: 18rem;
max-w-xsmax-width: 20rem;
max-w-smmax-width: 24rem;
max-w-mdmax-width: 28rem;
max-w-lgmax-width: 32rem;
max-w-xlmax-width: 36rem;
max-w-2xlmax-width: 42rem;
max-w-3xlmax-width: 48rem;
max-w-4xlmax-width: 56rem;
max-w-5xlmax-width: 64rem;
max-w-6xlmax-width: 72rem;
max-w-7xlmax-width: 80rem;
max-w-screen-smmax-width: 640px;
max-w-screen-mdmax-width: 768px;
max-w-screen-lgmax-width: 1024px;
max-w-screen-xlmax-width: 1280px;
max-w-screen-2xlmax-width: 1536px;

Min height 23

Variants: none

ClassCSS
min-h-0min-height: 0;
min-h-8min-height: 2rem;
min-h-10min-height: 2.5rem;
min-h-12min-height: 3rem;
min-h-16min-height: 4rem;
min-h-20min-height: 5rem;
min-h-24min-height: 6rem;
min-h-32min-height: 8rem;
min-h-40min-height: 10rem;
min-h-48min-height: 12rem;
min-h-64min-height: 16rem;
min-h-72min-height: 18rem;
min-h-80min-height: 20rem;
min-h-96min-height: 24rem;
min-h-pxmin-height: 1px;
min-h-fullmin-height: 100%;
min-h-minmin-height: min-content;
min-h-maxmin-height: max-content;
min-h-fitmin-height: fit-content;
min-h-screenmin-height: 100vh;
min-h-svhmin-height: 100svh;
min-h-lvhmin-height: 100lvh;
min-h-dvhmin-height: 100dvh;

Max height 42

Variants: none

ClassCSS
max-h-0max-height: 0;
max-h-1max-height: 0.25rem;
max-h-2max-height: 0.5rem;
max-h-3max-height: 0.75rem;
max-h-4max-height: 1rem;
max-h-5max-height: 1.25rem;
max-h-6max-height: 1.5rem;
max-h-7max-height: 1.75rem;
max-h-8max-height: 2rem;
max-h-9max-height: 2.25rem;
max-h-10max-height: 2.5rem;
max-h-11max-height: 2.75rem;
max-h-12max-height: 3rem;
max-h-14max-height: 3.5rem;
max-h-16max-height: 4rem;
max-h-20max-height: 5rem;
max-h-24max-height: 6rem;
max-h-28max-height: 7rem;
max-h-32max-height: 8rem;
max-h-36max-height: 9rem;
max-h-40max-height: 10rem;
max-h-44max-height: 11rem;
max-h-48max-height: 12rem;
max-h-56max-height: 14rem;
max-h-64max-height: 16rem;
max-h-72max-height: 18rem;
max-h-80max-height: 20rem;
max-h-96max-height: 24rem;
max-h-nonemax-height: none;
max-h-pxmax-height: 1px;
max-h-0.5max-height: 0.125rem;
max-h-1.5max-height: 0.375rem;
max-h-2.5max-height: 0.625rem;
max-h-3.5max-height: 0.875rem;
max-h-fullmax-height: 100%;
max-h-minmax-height: min-content;
max-h-maxmax-height: max-content;
max-h-fitmax-height: fit-content;
max-h-screenmax-height: 100vh;
max-h-svhmax-height: 100svh;
max-h-lvhmax-height: 100lvh;
max-h-dvhmax-height: 100dvh;

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.