Why Monsoon
Each reason below has a live demo built with the classes it describes, or the few lines of code it takes. The demos on this page use the same stylesheet you would link, plus the small arbitrary value script for the one demo that needs it.
One stylesheet link is the whole install: every class is already in the file, 88.3 kB with brotli, so there is no compiler, config or watcher, in development or in production.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0">Write w-[37px] or bg-[#0ea5e9] when no step fits: a small script writes the rules in the browser, or the purge CLI compiles them for production.
Primary, accent, surfaces, borders, muted text and the focus ring are computed from one OKLCH seed in pure CSS, so one line re-themes everything.
Every fill and its foreground keep at least 4.5:1 for any seed, in light and dark mode, and the test suite checks each pair across a sweep of seeds.
Put a seed on any element and only that subtree re-themes, so a pricing card, a sidebar or a whole tenant can have its own brand on the same page.
Ocean
Ember
A light card inside a dark section inside a light page is exactly what you expect, at any depth, for the tokens and for the dark: prefix alike.
dark
light
167 components ship in the one stylesheet, 122 of them with no script at all: forms, actions, navigation, overlays and data display.
Dialogs, popovers, menus and accordions are built on dialog, the popover attribute and details, so the browser does the work and nothing has to hydrate.
One script adds file drop, cropping, date pickers, sortable lists, comboboxes and more on top of native inputs that keep working without it.
<script src="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.js" defer></script>
<div class="datepicker" data-m-datepicker>
<input type="date" class="input">
</div>Prefix a class with @sm: to @xl: and it reacts to the width of its container, so a card adapts to the column it is dropped into.
Stacks when narrow, a row from 20rem of container width.
text-fluid-* and p-fluid-* grow smoothly with the viewport between a mobile and a desktop size, with no breakpoint classes and respecting browser zoom.
Fluid heading
Resize the window to watch it grow.
Hide navigation when printing, mirror a margin in right to left languages and fix a border for high contrast themes, all with a prefix.
<nav class="print:hidden">...</nav>
<span class="ml-4 rtl:ml-0 rtl:mr-4">Badge</span>
<div class="border-0 forced-colors:border">...</div>One command keeps only the classes your files use and writes static rules for every arbitrary value it finds, with no config file.
npx monsooncss purge "src/**/*.{html,jsx,vue,php}" -o public/monsoon.cssIt is plain CSS classes, so server templates, static site generators and single page apps all use it the same way, with 17 step by step install guides.
{% for user in users %}
<li class="flex items-center gap-3 py-2">{{ user.name }}</li>
{% endfor %}Inputs, selects and buttons of the same size share one height, radius and padding token, so a row of mixed controls lines up with no tweaks.
Twenty-two hues share one lightness curve and have their chroma capped to sRGB, so step 500 of every hue looks equally strong and renders the same everywhere.
Every component has a visible focus ring, motion stops under prefers-reduced-motion and controls stay usable in forced colors mode, with no extra classes.
Learn moreComponents sit before the utilities in the same file, so a utility on a component always wins without !important or a specificity fight.
Every page of every site that links the same version shares one file the browser already has, so the second page and the next project load no CSS at all.
<!-- page one, page two, project three: the same URL -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0">classes.json lists all 4,923 classes with their CSS and variants, ready for editor completion, linters and other tooling.
{
"class": "grid-cols-3",
"category": "grid",
"css": ".grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}",
"variants": ["sm", "md", "lg", "xl", "2xl", "@xs", "@sm", "@md", "@lg", "@xl", "print", "screen"]
}Free and open source under the MIT license.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">