Web Dev Cohort 2026 · ChaiCode HQ

Utility-first CSS.
Zero build step.

Write chai-* class names in your HTML. ChaiTailwind scans your DOM and converts them to inline styles at runtime. No npm. No config. No compilation.

Try the playground Get started →
// how it works

Three steps.
One script tag.

01 / SCAN
DOM traversal at load
After DOMContentLoaded fires, ChaiTailwind queries every element on the page and inspects each class name.
// walks every element document.querySelectorAll('*') .forEach(el => inspect(el))
02 / PARSE
Class name → CSS property
Each chai-* class is split into a property key and value, then matched against a rules map.
// chai-p-4 → prop: p, val: 4 const prop = raw.slice(0, dash) const val = raw.slice(dash + 1)
03 / APPLY
Inline styles injected
The resolved style object is merged into the element's inline style. The chai-* class is then removed.
// merge and clean up Object.assign(el.style, styles) el.classList.remove(cls)
04 / RESULT
Pure inline styles remain
Your HTML is clean. No framework classes left in the DOM — just native style="" attributes the browser renders directly.
<!-- before --> <div class="chai-p-4 chai-bg-blue"> <!-- after --> <div style="padding:16px;background:#3b82f6">
// live playground

Type a class.
See the style.

class name
try these
preview
Your element renders here
generated style
// style output appears here
// supported utilities

Everything you need.
Nothing you don't.

Spacing
chai-p-4padding: 16px
chai-px-6padding-left/right: 24px
chai-py-3padding-top/bottom: 12px
chai-m-4margin: 16px
chai-mt-8margin-top: 32px
chai-gap-4gap: 16px
Colors
chai-bg-redbackground: #ef4444
chai-bg-bluebackground: #3b82f6
chai-bg-greenbackground: #22c55e
chai-text-whitecolor: #ffffff
chai-text-graycolor: #6b7280
chai-bg-[#ff6347]background: #ff6347
Typography
chai-text-xlfont-size: 20px
chai-text-smfont-size: 14px
chai-font-boldfont-weight: bold
chai-text-centertext-align: center
chai-uppercasetext-transform: uppercase
chai-underlinetext-decoration: underline
Layout
chai-flexdisplay: flex
chai-flex-colflex-direction: column
chai-items-centeralign-items: center
chai-justify-betweenjustify-content: space-between
chai-hiddendisplay: none
chai-blockdisplay: block
Borders
chai-borderborder: 1px solid #d1d5db
chai-roundedborder-radius: 6px
chai-rounded-lgborder-radius: 12px
chai-rounded-fullborder-radius: 9999px
chai-shadowbox-shadow: 0 1px 3px ...
chai-shadow-lgbox-shadow: 0 10px 15px ...
Sizing
chai-w-fullwidth: 100%
chai-h-fullheight: 100%
chai-w-16width: 64px
chai-h-12height: 48px
chai-opacity-50opacity: 0.5
chai-cursor-pointercursor: pointer
// get started

One line.
That's it.

index.html 
<!-- 1. Write chai-* classes in your HTML -->
<div class="chai-p-6 chai-bg-blue chai-text-white chai-rounded-lg">
  Hello ChaiTailwind
</div>

<!-- 2. Drop in the script at the end of body -->
<script src="chai.js"></script>

<!-- That's it. No npm. No config. No build step. -->
localhost:5500/demo.html
NA
Nawazish Khan
Full-stack Developer
chai-rounded-full chai-bg-blue chai-text-sm
42
utilities
0
dependencies
1
script tag

↑ Built entirely with chai-* classes. Zero other CSS.