Drop one script. Write
chai-*
classes. Styles inject inline at runtime - no stylesheet, no
bundler, no config.
<div class="chai-bg-neo-orange
chai-p-6 chai-font-bold
chai-border-neo chai-text-ink">scanning…
No webpack, no Vite, no PostCSS pipeline. Drop the script tag and start writing classes. Works in any HTML file - instantly.
On init,
querySelectorAll walks every
element. Each classList is checked against the style registry.
Styles land on element.style via
setProperty(). Open DevTools and
you'll see style="..." on every
element.
A MutationObserver with RAF
batching watches for new and modified elements - dynamic content
gets styled automatically, no re-init needed.
Add
<script src="chai-wind.js"></script> to
your page. Call ChaiWind.init() and the engine
starts.
Write chai-* classes on any HTML element - same
intuition as Tailwind. No config, no purge step.
ChaiWind scans the DOM and injects inline styles. Every matched
class becomes a style="..." attribute on the element.
<script
src="https://cdn.jsdelivr.net/npm/chaiwindjs/chai-wind.js"
></script>
<script>
ChaiWind.init();
</script>bun add chaiwindjs
// or: npm install chaiwindjs
import 'chaiwindjs';
ChaiWind.init();chai-wind is a proof-of-concept - not a production Tailwind replacement. It proves runtime injection is viable. Here's how the two differ technically.
| Feature | chai-wind | Tailwind CSS |
|---|---|---|
| Build step | None needed | JIT compiler required |
| Generates a stylesheet | Never - zero CSS files | One optimised CSS file |
| How styles apply | Inline via element.style |
CSS class rules |
| Specificity | Highest (inline beats all) | Normal CSS cascade |
| Dynamic runtime classes | Always supported | Build-time only |
| Configuration needed | None - drop & go | tailwind.config.js |
| Production-grade | Proof of concept | Battle-tested |