Chai Forge is a zero-config utility CSS engine that lives entirely in JavaScript. One script tag. No PostCSS. No build step. Just write classes and watch them work.
npm i chai-forge
cdn.jsdelivr.net/gh/TheAdroitDev/Chai-Forge/index.js
No PostCSS. No Webpack. No config files. Drop one script tag and Chai Forge initializes itself on load.
Dynamically added nodes are styled automatically. Works with SPAs, frameworks, and lazy-loaded content.
An opinionated palette with chai-bg-* and chai-text-* utilities ready out of the box.
Pure JavaScript, zero dependencies. Optimized DOM selectors so it never scans the entire page unnecessarily.
Flex, justify-content, align-items — the layout primitives you reach for every day, now as simple class names.
No function calls needed. Chai Forge listens for DOMContentLoaded and
runs entirely on its own.
Drop the CDN script or run npm i chai-forge — that is your entire setup.
Add chai-* classes to any element. Spacing, colors, flex, borders — all
included.
The engine scans, parses, converts to inline styles automatically. You just write HTML.
<script src="https://cdn.jsdelivr.net/gh/TheAdroitDev/Chai-Forge/src/index.js"></script>
Tap any class chip and watch it apply live to the preview element on the right.
| Class | CSS Output |
|---|---|
| chai-p-{n} | padding: {n}px |
| chai-m-{n} | margin: {n}px |
| chai-bg-red | background-color: #ef4444 |
| chai-bg-blue | background-color: #3b82f6 |
| chai-bg-green | background-color: #22c55e |
| chai-bg-black | background-color: #0f172a |
| chai-bg-white | background-color: #f8fafc |
| chai-text-center | text-align: center |
| chai-text-left | text-align: left |
| chai-text-right | text-align: right |
| chai-text-{n} | font-size: {n}px |
| chai-text-white | color: #f8fafc |
| chai-text-red | color: #ef4444 |
| chai-rounded-{n} | border-radius: {n}px |
| chai-border-{n} | border: {n}px solid … |
| chai-flex | display: flex |
| chai-justify-{v} | justify-content: {v} |
| chai-items-{v} | align-items: {v} |
| chai-w-{n} | width: {n}px |
| chai-h-{n} | height: {n}px |