Write
cw-p-4
and ChaiWindCSS sets
style="padding:16px"
directly on your element. No build, no CSS file, no config.
<!-- Drop the CDN script -->
<script src="https://cdn.jsdelivr.net/gh/koushik-karmakar/chaiwindcss@1.0.0/dist/chaiwindcss.min.js"></script>
<!-- Write cw- classes as usual -->
<div class="cw-flex cw-gap-4 cw-p-6 cw-bg-orange-600 cw-rounded-xl">
<h1 class="cw-text-2xl cw-fw-bold cw-color-white">Hello World</h1>
</div>
<!-- Inspect element — styles are set inline automatically ✓ -->
<div style="display:flex; gap:16px; padding:24px; background-color:#ea580c; border-radius:12px;">Why ChaiWindCSS
No config files, no PostCSS, no purge step. Drop a script tag and start building.
One
<script>
tag. Done. No CLI, no webpack, no npm install required.
Every class resolves to
style=""
directly on the element — no stylesheet generated, ever.
MutationObserver watches every new node. Styles apply to React, Vue, or JS-generated content automatically.
Rules are plain JS objects. Add a new utility in seconds by adding one function to a rules file and rebuilding.
9 color families × 19 shades each (50 → 950). Every shade interpolated for perceptually smooth transitions.
Under 3kb minified. No tree-shaking required — every rule runs only when its class appears on the page.
Under the hood
From class name to inline style in milliseconds
On
DOMContentLoaded, the engine queries every element that has a
cw-
class prefix.
cw-bg-orange-600
splits to key
bg
and args
orange, 600. The longest key match wins.
rules["bg"]("orange","600")
looks up the palette and returns
{ backgroundColor: "#ea580c" }.
All resolved styles merge and set via
Object.assign(el.style, styles). No stylesheet. No class injection.
// "cw-bg-orange-600"
raw = "bg-orange-600"
parts = ["bg", "orange", "600"]
// longest key match first
key = "bg" // ✓ rules["bg"] exists
rest = ["orange", "600"]
// call rule with args
rules["bg"]("orange", "600")
// → resolveColor("orange", "600")
// → "#ea580c"
// set inline
el.style.backgroundColor = "#ea580c" ✓
// result in HTML
<div style="background-color:#ea580c">Reference
Every class you need to build a complete landing page
cw-p-{n}
cw-px-{n} / cw-py-{n}
cw-m-{n} / cw-mx-{n}
cw-gap-{n}
cw-text-{xs|sm|lg|xl...}
cw-fw-{bold|semibold...}
cw-leading-{relaxed...}
cw-uppercase / cw-truncate
cw-bg-{color}-{shade}
cw-color-{color}-{shade}
cw-border-color-orange-500
50 → 150 → 250 → ... → 950
cw-flex / cw-grid / cw-block
cw-flex-col / cw-flex-row
cw-justify-between
cw-items-center
cw-w-{n|full|auto}
cw-h-{n|full}
cw-max-w-{n}
cw-size-{n}
cw-b / cw-bt / cw-bb
cw-rounded-{md|lg|xl|full}
cw-bw-{n}
cw-ring-{n}
cw-shadow-{sm|md|lg|xl}
cw-opacity-{0-100}
cw-cursor-pointer
cw-transition
cw-relative / cw-absolute
cw-top-{n} / cw-left-{n}
cw-z-{n}
cw-inset-{n}
Color system
50, 100, 150, 200, 250 ... all the way to 950 — finer granularity than Tailwind
Orange — all 19 shades
Blue
Gray
Green
Purple
Red
Teal
Pink
Yellow
Get started in 10 seconds
One script tag is all it takes. No npm, no config, no build pipeline.
https://cdn.jsdelivr.net/gh/koushik-karmakar/chaiwindcss@1.0.0/dist/chaiwindcss.min.jshttps://cdn.jsdelivr.net/gh/koushik-karmakar/chaiwindcss@main/dist/chaiwindcss.min.js<!DOCTYPE html>
<html><head>
<script src="https://cdn.jsdelivr.net/gh/koushik-karmakar/chaiwindcss@1.0.0/dist/chaiwindcss.min.js"></script>
</head><body>
<nav class="cw-flex cw-justify-between cw-items-center cw-px-8 cw-py-4 cw-bg-gray-900">
<span class="cw-fw-bold cw-text-xl cw-color-white">MyApp</span>
<button class="cw-bg-orange-600 cw-color-white cw-px-4 cw-py-2 cw-rounded-lg cw-fw-medium cw-cursor-pointer">
Get Started
</button>
</nav>
<section class="cw-flex cw-flex-col cw-items-center cw-py-20 cw-bg-orange-50 cw-text-center">
<h1 class="cw-text-5xl cw-fw-black cw-color-gray-900 cw-mb-4">Hello World</h1>
<p class="cw-text-lg cw-color-gray-500 cw-leading-relaxed">Built with ChaiWindCSS</p>
</section>
</body></html>Auto-injected into every page on load
* { margin:0; padding:0; box-sizing:border-box
}
html { scroll-behavior: smooth }
a { text-decoration: none }
img { max-width:100%; display:block }