This entire page uses santy-jit.js with zero pre-generated CSS. Every class is compiled at runtime as it appears in the DOM.
MutationObserver watches every element and class attribute change in real-time.
Pattern-matches class names and generates the exact CSS properties for each one.
Appends the generated rule to a <style> tag. Each class is only generated once.
Type any SantyCSS class — it generates CSS instantly.
Generated CSS rules:
JIT also handles classes added by JavaScript at runtime — no pre-generation needed.
Each click may inject new classes. Watch the stats counter in the header.
JIT advantage: not limited to pre-generated values. Try 137px padding or 19px font size.
These classes (add-padding-7, set-text-19, round-corners-7) don't exist in santy.css — JIT generates them on demand.
| Feature | santy.css | santy-jit.js |
|---|---|---|
| Initial load size | 574 KB (3 KB purged) | ~35 KB |
| Arbitrary values (any pixel) | Limited to pre-generated | ✅ Any number |
| No build step | ✅ (full) / ✅ (purge CLI) | ✅ |
| Dynamic classes (JS-added) | ✅ (if pre-generated) | ✅ Always |
| SSR / Static site compatible | ✅ | ⚠️ Needs JS |
| Recommended for | Production, SSR, static | Prototyping, SPAs, dev |
Basic — drop a script tag
<script src="santy-jit.js"></script> <!-- That's it. Use any SantyCSS class anywhere. --> <div class="add-padding-137 background-blue-500 round-corners-7">Works!</div>
With config (safelist, CSP nonce)
<script> // Configure before the script loads window.SantyJIT = { safelist: ['make-hidden', 'animate-spin'], // always inject nonce: 'your-csp-nonce', }; </script> <script src="santy-jit.js"></script>
Programmatic API
// Inject a class manually (e.g. from a JS framework) SantyJIT.inject('add-padding-24'); // Scan a newly inserted DOM subtree SantyJIT.scan(document.querySelector('#app')); // Get runtime stats console.log(SantyJIT.stats()); // → { generated: 142, bytes: 8432 } // Extract the generated CSS (e.g. for SSR extraction) const css = SantyJIT.getCSS();
