Introduction

chaiTailwind is a client-side utility-first CSS engine, written in around 600 lines of pure JavaScript. It does one thing: after the page loads, it walks the DOM, finds every class beginning with chai-, parses it into a style object, and applies that style inline.

<!-- Before -->
<div class="chai-p-4 chai-bg-chai-600 chai-text-white">…</div>

<!-- After chaiTailwind runs -->
<div style="padding: 4px; background-color: #6f3d1a; color: #ffffff;">…</div>

There is no stylesheet generated, no PostCSS step, no build pipeline, no atomic CSS. Just one <script> tag, and your existing markup keeps working.

What it gives you

• A familiar utility vocabulary — spacing, sizing, colors, typography, borders, flex/grid, effects. The class names look and feel like the framework you already know.
• Zero configuration — sensible defaults for palettes, font sizes, radii, and shadows. Override what you want via theme:.
• First-class arbitrary values — chai-p-[1.5rem], chai-bg-[#ffeedd], chai-text-[42px].
• Live DOM observation — newly inserted nodes are styled automatically via MutationObserver. Works with vanilla JS, htmx, Alpine, etc.
• Programmatic API — extend with custom rules, scan a subtree, parse a class to a style object, override the theme.

What it isn’t

It’s not a Tailwind compatibility layer — class names are similar by design, but the rule set is intentionally smaller. It’s not a stylesheet generator — there is no CSS file to ship. It’s not a server-side renderer — styles arrive after JavaScript runs.

For when those tradeoffs are wrong, see Concepts → Tradeoffs.

When to use it

You’ll like chaiTailwind if you’re:

• Prototyping in a single HTML file and don’t want a toolchain.
• Building an embeddable widget or admin tool where dragging in Tailwind is overkill.
• Teaching utility-CSS thinking without the cognitive overhead of a build step.
• Generating HTML in a place that doesn’t have a build step (a CMS, an email template viewer, an internal dashboard).