Reference

Class reference

Search all 4,923 utility classes, see the exact CSS each one writes and which of the 10,237 variant classes exist for it.

4,923 classes match, showing the first .

No variants

No class matches. Try a shorter search, such as grid or primary.

Reading a variant class

A variant is a prefix and a colon in front of a base class. The base class writes the CSS, the prefix decides when it applies.

variants.html

<!-- base class: always applies -->
<a class="text-primary">Docs</a>

<!-- state variant: only on hover -->
<a class="text-muted-foreground hover:text-foreground">Docs</a>

<!-- breakpoint: from 768px wide -->
<div class="grid grid-cols-1 md:grid-cols-3">...</div>

<!-- container query: when the @container parent is 28rem wide -->
<div class="@container"><div class="flex flex-col @md:flex-row">...</div></div>

Terminalbash

npx monsooncss classes --filter rounded

Class reference FAQ

How do I find which classes Monsoon has?

Search this page, press Ctrl K anywhere on the site, or run npx monsooncss classes in a terminal. Add --filter grid-cols to narrow the list. The full index with CSS also ships in the repository as scripts/classes.json.

Why does a class not have a hover: or md: version?

Variants are generated for the utility groups where they are useful, which keeps the complete file small enough to link from a CDN. The variant chips on each result show exactly what is available.

Can I combine two variants, such as dark:hover:?

No. Stacked variants are not part of the prebuilt file. Semantic colors switch with the color scheme on their own, so hover:bg-primary already works in dark mode.

Are arbitrary values like w-[37px] supported?

Yes, with no build step. They are not in the stylesheet: load monsoon.js (or the small monsoon-arbitrary.js) and they are written in the browser, or run the purge CLI and they are compiled into the purged file. See the arbitrary values page in the docs.