v0.1 · Steeped in pure JavaScript · 0kb CSS

Utility-first CSS,
brewed&sipped
in the browser.

Drop in <script src="chai.js">, write chai-px-4 chai-bg-chai-600, and the engine walks the DOM, parses every utility, and applies inline styles. No build step. No config. No CSS file.

Quick start → Tutorial on GitHub ~6.4kB min+gzip · 0 deps

A simple recipe

<script src="chai.js"></script>

<button class="chai-px-5 chai-py-2.5
        chai-bg-chai-600 chai-text-white
        chai-rounded-full chai-shadow-md
        chai-cursor-pointer">
  Brew
</button>

↓

02 Try it. No install, no copy-paste.

Edit the HTML on the left. The right pane is real DOM — chaiTailwind is the only stylesheet on this page.

live · scan(stage)

HTML

Result

03 What's in the pot.

Spacing

p · m · gap

chai-p-2, chai-px-4, chai-mt-8, chai-m-[1.5rem], plus directional variants for every side.

Colors

bg · text · border

21 palettes × 10 shades, plus a tea-house brand set (chai, saffron, cardamom, masala) — and arbitrary [#ffeedd].

Typography

size · weight · align

chai-text-2xl, chai-font-bold, chai-text-center, chai-italic, chai-uppercase, chai-leading-relaxed.

Borders

width · style · radius

chai-border, chai-border-2, chai-border-dashed, chai-rounded-lg, chai-rounded-full.

Flex & Grid

flex · grid · gap

chai-flex-col, chai-justify-between, chai-items-center, chai-grid-cols-3, chai-col-span-2.

Effects

shadow · opacity · cursor

chai-shadow-lg, chai-opacity-80, chai-cursor-pointer, chai-select-none, plus arbitrary values everywhere.

chaiTailwind is intentionally minimal — utilities are resolved at runtime and applied as inline styles, so there's no build pipeline to wire up. It's a sensible fit for prototypes, internal tools, landing pages, and embedded widgets where setup speed matters more than the last byte of CSS. Before reaching for it in a large production app, read the tradeoffs — or skim the downloadable templates to see what it can build.

Made by Saad · @developedbysaad on X