Install Monsoon in plain HTML

#Install

Pick where the stylesheet comes from. The CDN is the quickest start, a local copy is the right call for intranets, offline kiosks or a strict content security policy.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">
  <script>(function(){var t;try{t=localStorage.getItem('monsoon-theme')}catch(e){}var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.add(d?'dark':'light')})()</script>
</head>
<body class="bg-background text-foreground antialiased">
  <main class="mx-auto max-w-2xl px-6 py-16 space-y-6">
    <h1 class="text-4xl font-extrabold tracking-tight">Hello, Monsoon</h1>
    <p class="text-lg text-muted-foreground">One stylesheet, no build step.</p>
  </main>
</body>
</html>

npm install monsooncss
cp node_modules/monsooncss/dist/monsoon.min.css css/monsoon.min.css

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="css/monsoon.min.css">
  <script>(function(){var t;try{t=localStorage.getItem('monsoon-theme')}catch(e){}var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.add(d?'dark':'light')})()</script>
</head>
<body class="bg-background text-foreground antialiased">
  <main class="mx-auto max-w-2xl px-6 py-16 space-y-6">
    <h1 class="text-4xl font-extrabold tracking-tight">Hello, Monsoon</h1>
    <p class="text-lg text-muted-foreground">Served from my own folder.</p>
  </main>
</body>
</html>

#Use the classes

Write classes straight into the class attribute. Responsive variants such as md:grid-cols-3 and state variants such as hover:bg-primary/90 are already in the file.

<section class="mx-auto max-w-5xl px-6 py-12">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <article class="rounded-2xl border bg-surface p-6 shadow-sm space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">Team plan</h2>
        <span class="rounded-full bg-secondary text-secondary-foreground px-2 py-1 text-xs font-medium">Popular</span>
      </div>
      <p class="text-muted-foreground">Shared projects, roles and a single invoice for everyone.</p>
      <button type="button" class="w-full rounded-lg bg-primary text-primary-foreground px-4 py-2 font-medium hover:bg-primary/90">
        Choose plan
      </button>
    </article>
  </div>
</section>

Static variants are not stacked (md:hover: does not exist). When a scale has no step that fits, write an arbitrary value such as w-[37px] (it needs monsoon.js or the purge CLI), a style attribute, or a few lines of your own CSS with the theme variables.

#Dark mode

Without any extra code, Monsoon follows the operating system through prefers-color-scheme. A toggle needs two pieces: the one line script in <head> from the install step, which applies the saved choice before the first paint, and a button that flips the class on <html>.

<button type="button" id="theme-toggle" class="rounded-lg border px-3 py-2 text-sm hover:bg-muted">
  Toggle theme
</button>

<script>
  const button = document.getElementById('theme-toggle');

  button.addEventListener('click', () => {
    const root = document.documentElement;
    const next = root.classList.contains('dark') ? 'light' : 'dark';
    root.classList.remove('dark', 'light');
    root.classList.add(next);
    button.setAttribute('aria-pressed', String(next === 'dark'));
    try { localStorage.setItem('monsoon-theme', next); } catch (e) {}
  });
</script>

The class works on any element, not only <html>. A section with class="dark" stays dark on a light page, and its semantic colors follow:

<aside class="dark rounded-2xl bg-background text-foreground p-6">
  <p class="text-muted-foreground">This panel is always dark.</p>
</aside>

#Theme with --seed

Set --seed once for the page, or on any element to theme just that part:

<style>
  :root { --seed: #0d9488; }
</style>

<section style="--seed: #7c3aed" class="rounded-2xl bg-surface p-6 space-y-3">
  <h2 class="text-xl font-bold text-primary">Violet section</h2>
  <button type="button" class="rounded-lg bg-primary text-primary-foreground px-4 py-2">Primary</button>
</section>

A color input can drive the seed live, which is handy while you pick a brand color:

<input type="color" id="seed" value="#0d9488">

<script>
  document.getElementById('seed').addEventListener('input', (event) => {
    document.documentElement.style.setProperty('--seed', event.target.value);
  });
</script>

Every semantic token (primary, secondary, accent, surfaces, muted text, borders and the focus ring) is derived from --seed in the browser. Theming lists the tokens.

#Using the purge CLI

The full file is cached after the first visit, so many sites never purge. When you want the smallest possible file, scan your pages once and write a stylesheet with only the rules they use. Add a script to package.json:

{
  "private": true,
  "scripts": {
    "css:purge": "monsooncss purge \"**/*.html\" \"js/**/*.js\" -o css/monsoon.css"
  },
  "devDependencies": {
    "monsooncss": "^0.2.0"
  }
}

npm run css:purge

Then point the <link> at css/monsoon.css instead of the CDN URL or the full copy. Run the script again whenever you add classes. Without a package.json, npx monsooncss purge "**/*.html" -o css/monsoon.css does the same in one line.

The purged file always keeps the reset, the theme tokens, the .dark and .light scopes and the keyframes, so dark mode and --seed keep working. See the purge CLI reference for every option.

#Next steps

• Browse every utility and its variants in the class reference.
• Read how the scheme is chosen in Dark mode, and how tokens are derived in Theming.
• Using a framework? Start from React, Vue or PHP.

#Frequently asked questions