Install Monsoon with npm

#Install the package

npm install monsooncss

pnpm add monsooncss

yarn add monsooncss

bun add monsooncss

The package has no dependencies. It contains the two stylesheets in dist/, the command line tool in bin/, the readme, the license and the changelog.

#What the package exports

There is no JavaScript entry point. The main, style, unpkg and jsdelivr fields all point at the minified stylesheet, and sideEffects lists *.css, so bundlers that tree shake never drop the import.

#Import it in a bundler

Any bundler that handles CSS imports (Vite, webpack with a CSS loader, Parcel, esbuild) can import the stylesheet from your entry file. Import it once, before your own styles:

import 'monsooncss';
import './styles.css';

To bundle the readable file while you debug, import monsooncss/css instead. In production the minified default is the better choice.

You can also import it from a CSS file. @import must come before any other rule in the file:

@import 'monsooncss';

:root {
  --seed: #0d9488;
}

.prose-link {
  color: var(--primary);
  text-decoration: underline;
}

The import is the same in every framework, only the entry file changes:

#Copy the file instead

Server rendered stacks such as Laravel, Django, Rails, WordPress or plain PHP often have no CSS bundler. Copy the stylesheet into your public folder and link it like any other static asset:

cp node_modules/monsooncss/dist/monsoon.min.css public/css/monsoon.min.css

To keep the copy in sync when you update the package, run the copy from an npm script. This version uses Node instead of cp, so it also works in Windows terminals. Create the public/css folder once beforehand:

{
  "scripts": {
    "copy:css": "node -e \"require('fs').copyFileSync('node_modules/monsooncss/dist/monsoon.min.css', 'public/css/monsoon.min.css')\"",
    "postinstall": "npm run copy:css"
  },
  "devDependencies": {
    "monsooncss": "^0.2.0"
  }
}

Then link /css/monsoon.min.css from your layout. The Laravel, Django, Rails, WordPress and PHP guides show the exact template tag for each.

#The monsooncss command

The package also installs a command line tool named monsooncss. It needs Node.js 18 or newer. Run it with npx, or call it by name from an npm script:

npx monsooncss --version

0.2.0

#Updating

npm treats versions below 1.0 carefully: a caret range such as ^0.2.0 accepts new 0.2.x patches but not the next minor release. To move to a new minor version, install it explicitly and read the changelog first:

npm install monsooncss@latest

To see which version a project uses, run npm ls monsooncss or npx monsooncss --version. If you copy the file into a public folder, remember that the copy only changes when your copy script runs again.

#Frequently asked questions