Lightweight utility-first CSS engine without the build step
Powered by the Vanilla JS chaiTail engine. Parse utility classes directly in the browser for rapid prototyping and dynamic styling using the "chai-" prefix.
How to use chaiTail
Include the Engine
Link the chaiTail script at the bottom of your HTML document. It automatically initializes and scans the DOM on load.
<script src="https://chai-tail-vjs.netlify.app/lib/chaiTailwind.min.js
"></script>Add Utility Classes
Construct your UI using the chai- prefix. The engine will target only these specific classes.
<div class="chai-flex chai-bg-black">
Content
</div>Watch it Render
chaiTail instantly calculates the CSS, maps it to inline styles, and cleans up the class list to keep your DOM tidy
<div style="display: flex; background: black;">
Content
</div>Supported Utilities
Layout
- chai-flex
- chai-flex-col
- chai-items-center
- chai-justify-center
Dynamic Properties
- chai-p-{val}
- chai-m-{val}
- chai-rounded-{val}
- chai-font-{val}
Appearance
- chai-bg-{color}
- chai-text-{color}
- chai-block
- chai-hidden
Quick Test Playground
Edit the class list below to see the chaiTail engine parse styles in real-time. Classes are immediately converted to inline styles and removed from the DOM.