How Nakshora 3.1 scans your content and emits only the CSS you use — the engine behind 11,417 utilitys in a 10 KB stylesheet.
The idea#
The JIT (just-in-time) compiler scans your content files, extracts every class name, and emits CSS for exactly those — nothing else. An 11,417-utility catalog becomes a 10 KB stylesheet. Scanning is incremental (mtime + hash cache), so rebuilds take about a millisecond.
In practice#
example
<!-- content/index.html contains: -->
<div class="p-4 bg-blue-500 rounded-lg">…</div>
/* compiled output — ONLY these three rules: */
.p-4 { padding: 1rem }
.bg-blue-500 { background-color: var(--color-blue-500) }
.rounded-lg { border-radius: 0.5rem }Common mistakes#
- Building class names with string concatenation the scanner cannot see (use safelists)
- Scanning node_modules or build output (slow, wrong classes)
- Shipping full mode to production out of habit
Keep learning#
Next: concepts/design-tokens|Design tokens and utilities/index|the utilities reference put this concept to work. For the big picture, see getting-started/introduction|the introduction.
