A no build CSS framework for real projects

#Who it is for

Monsoon is designed for the many places where adding a bundler costs more than the problem you are solving:

• Static sites and landing pages. Plain HTML files uploaded to any host.
• Server-rendered applications. PHP, WordPress themes, Django and Jinja templates, Rails views, Go templates and any other language that outputs HTML.
• Prototypes and demos. Ideas you want on screen in minutes, often in a single file you can send to someone.
• Legacy pages. Older sites where you want modern layout utilities without touching a fragile pipeline.
• Documentation and internal tools. Pages that should keep working years from now with no dependency updates.

It also works inside projects that do have a build. Import the file once and it behaves like any other stylesheet.

#How the workflow feels

Without a compiler in the loop, the feedback cycle is the browser itself. Edit a class, save, refresh. Because the stylesheet already contains every class, the browser developer tools become a playground: add shadow-lg or md:grid-cols-3 to an element in the inspector and see the result immediately, then copy the class list back into your template.

<!-- try classes directly in the inspector, then keep what you like -->
<article class="rounded-2xl border bg-surface p-6 shadow-sm hover:shadow-lg transition">
  <h2 class="text-xl font-semibold">Weekly report</h2>
  <p class="mt-2 text-muted-foreground">Everything is already in the stylesheet.</p>
</article>

There is no cache to clear, no watcher to restart and no out of date generated file, because there is nothing generated.

#The theme lives in CSS, not in a config file

Build based systems usually keep colors in a configuration file that the compiler reads. Monsoon keeps the theme in the browser as custom properties. Set one variable and every semantic color follows:

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

Because it is runtime CSS, you can also change it per section with an attribute, per user from a value in your database, or with a color picker. See generate a theme from one color for the details.

#Keeping a project tidy without tooling

Long class lists are the usual concern with utility CSS. A few habits keep them readable when no build tool is there to help:

• Order classes the same way every time: layout, spacing, size, typography, color, state. For example flex items-center gap-3 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90.
• Extract repeated markup into your template language: a partial, an include, a component or a macro, not a new CSS class.
• Prefer semantic colors such as bg-surface and text-muted-foreground. They carry meaning, switch with dark mode and follow the seed.
• When a rule is truly custom, write it in a small stylesheet next to Monsoon and use the theme variables.

#What a no build stylesheet costs

The honest trade off is file size. A compiler can emit only the rules a page uses; a predeclared file ships all of them. Monsoon keeps that cost small, about 88.3 kB with brotli for everything, and cached after the first page view. When you need less, run the optional purge command once and serve its output. For most sites the full file is smaller than a single hero image.

#Frequently asked questions

#Keep reading