Candidates

The class names this HTML uses, extracted in MoonBit by moonbit-community/html — a WHATWG-conformant parser, not a regular expression. Dashed chips are candidates the compiler produced no CSS for, usually a typo or a class margaui does not define.

How it works

No server is involved. The compiler is a MoonBit program built for wasm-gc (— over the wire), and every number in the stats bar was measured inside it.

1. You type HTML into the left pane.
2. MoonBit wraps the fragment in <template> and parses it, then walks the resulting tree collecting class attributes. The wrapper is what lets a bare <tr> keep its classes: the HTML spec's "in template" mode re-enters the table insertion modes, where a document parse would throw those rows away. Last pass: — elements, — class attributes, — distinct candidates, in —.
3. compile_sync parses margaui's stylesheet graph — — files, — of CSS, resolved entirely from memory — into a compiler: —.
4. Compiler::build(candidates) emits only the rules those classes need: — for — of CSS. That ratio is the point of Tailwind, and the reason the editor recompiles from scratch on every edit rather than accumulating.
5. The stylesheet goes into a shadow root next to the adopted theme sheet, and the preview renders.

The same entry point is callable from any host. This is the whole request/response contract:

// in:
{ "html": "<div class=\"btn btn-primary\">Go</div>",
  "css": "@import \"tailwindcss\";",
  "imports": { "tailwindcss": "@theme { … } @tailwind utilities;" } }

// out:
{ "ok": true, "css": ".btn { … }",
  "candidates": ["btn", "btn-primary"],
  "counts": { "elements": 1, "classAttrs": 1, "candidates": 2, "cssChars": 812 },
  "timings": { "scanUs": 41, "compileUs": 17100, "buildUs": 5900, "totalUs": 23041 } }

Candidate discovery is normally the caller's job — the compiler never scans your templates on its own. This page is what it looks like when the caller does that work in MoonBit too.

About those timings: they are read inside the compiler, but the clock is the browser's, and performance.now() is clamped for privacy — often to 5 µs, sometimes much coarser. A stage quicker than one tick therefore reads 0, which is why the scan often does. Run ×10 compiles ten times and reports the median, which is the number worth comparing.

Compiler —, HTML parser —. The margaui bundle is — of JSON, parsed once at startup in —. margaui and attribution.

Benchmarks

Committed medians from this repo's benchmark suite, for context next to the Run ×10 button above. margaui is the workload this page runs.