ChaiTailwind is a lightweight, utility-first CSS framework built from scratch using vanilla JavaScript — no dependencies, no build tools, just pure JS parsing class names and injecting styles.
1. Add utility classes to any HTML element:
<div class="chai-flex chai-items-center chai-gap-4 chai-bg-#1a1a24 chai-rounded-8">
2. The JS engine scans every element, reads chai-* classes, and injects the matching CSS directly via style.cssText:
elem.style.cssText += chaiTailwind[className];
Use chai-p-4, chai-text-20, chai-rounded-12 — values computed at runtime.
Background and text colors via chai-bg-* and chai-text-* with any CSS color value.
Flexbox, positioning, width, height, gap — all the essentials for building real layouts.
Pure vanilla JS. Drop one <script> tag and it just works — no npm, no bundler.