v1.0.0 — Utility-First CSS Engine

ChaiTailwind

A lightweight, zero-dependency CSS utility engine. Writechai-* classes in your HTML — the engine parses them at runtime and applies inline styles.

<div class="chai-flex chai-gap-4 chai-p-6 chai-bg-blue-100 chai-rounded-xl">
  <button class="chai-bg-blue-600 chai-text-white chai-px-4 chai-py-2 chai-rounded-lg chai-font-semibold">Click</button>
</div>
Edit the HTML on the left, then click Run (or Ctrl+Enter)
✦ HTML Input
◉ Preview

Utility Categories

Every major CSS concern — mapped to a readable chai-* utility.

Spacing
chai-p-2 → padding: 0.5rem chai-px-6  chai-py-2 chai-m-2  chai-p-3
/* Scale: n × 0.25rem */
chai-p-4 → padding: 1rem
chai-px-6 → paddingLeft/Right: 1.5rem
chai-mt-8 → marginTop: 2rem
chai-mx-auto → margin: 0 auto
Colors
chai-bg-blue-500 → backgroundColor
chai-text-red-600 → color
chai-border-green → borderColor
/* Shades: 50 100 200 … 950 */
Typography
Display
Subheading — wide tracking
Body text, italic and relaxed line height for comfortable reading.
Label / Caption
chai-text-4xl → font-size: 2.25rem
chai-font-bold → font-weight: 700
chai-leading-relaxed → line-height: 1.625
chai-tracking-wide → letter-spacing: 0.025em
Borders & Shadows
chai-border1px solid currentColor
chai-border-22px solid currentColor
chai-rounded-lgborder-radius: 8px
chai-rounded-fullborder-radius: 9999px
chai-shadow-mdbox-shadow: (med)
chai-ring-2 → box-shadow: 0 0 0 2px …
chai-border-dashed → border-style: dashed
Layout & Flexbox
chai-flexdisplay: flex
chai-flex-colflex-direction: column
chai-items-centeralign-items: center
chai-justify-betweenspace-between
chai-flex-1flex: 1 1 0%
chai-flex-wrap → flex-wrap: wrap
chai-grow → flex-grow: 1
Grid
chai-griddisplay: grid
chai-grid-cols-3repeat(3, 1fr)
chai-col-span-2span 2 / span 2
chai-gap-x-4column-gap: 16px
chai-gap-y-6row-gap: 24px
chai-grid-cols-4 → repeat(4, minmax(0,1fr))
Sizing
chai-w-fullwidth: 100%
chai-h-16height: 64px
chai-w-1/2width: 50%
chai-max-w-prosemax-width: 65ch
chai-min-h-screenmin-height: 100vh
chai-w-screen → width: 100vw
Transitions & Transforms
chai-transitiontransition all
chai-duration-300300ms
chai-ease-in-outease-in-out
chai-scale-110scale(1.1)
chai-rotate-45rotate(45deg)
chai-translate-x-4 → translateX(16px)
Misc Utilities
chai-opacity-50opacity: 0.5
chai-overflow-hiddenoverflow: hidden
chai-cursor-pointercursor: pointer
chai-select-noneuser-select: none
chai-invisiblevisibility: hidden
chai-sr-only → screenreader clip

Live Demo — styled by ChaiTailwind

chai-bg-blue-500
chai-rounded-full
chai-shadow-xl
chai-uppercase
chai-text-black
chai-opacity-70