ZERO-BUILD UTILITY ENGINE

Brew your own
utility CSS.

ChaiTail scans chai-* classes in your HTML and generates mapped styles at runtime. No compilation. Pure freedom.

Try Playground Browse Utilities
npm install chaitail
5 utility families • 20+ color tokens • Runtime instant generation
<div class="chai-bg-white
chai-p-40 chai-rounded-20
chai-flex chai-gap-20">
  <h2 class="chai-text-masala-chai">
    Minimal engine
  </h2>
</div>

Minimal engine

Keep the engine simple, but give it real range.

A utility scale covering layout, surfaces, topography, and styling constraints explicitly mapped.

Spacing & Sizing Primitives

Numeric spacing classes let you move quickly without referencing a separate scale variable. Margin, padding, gap, sizes flow cleanly.

chai-p-40 chai-w-full

Typography and Color

Text styling, alignment, and full Tea Color token integration map dynamically without compile steps.

chai-text-masala-chai

Surface Polish

Border, radius, and fundamental rendering logic out-the-box.

Interactive Playground

Edit classes like a command line.

$
Live Component Rendering
Try altering the background or padding

Dictionary

Class mapping reference.

Layout & Flow

Alignments, directions, floats.

chai-flex chai-flex-col chai-block chai-items-center chai-justify-center

Spacing, Width, Height

Padding, margin, gaps, dimensions.

chai-p-{val} chai-m-{val} chai-gap-{val} chai-w-{val} chai-h-full

Appearance & Color

Text styling, backgrounds, rounding.

chai-bg-{color} chai-text-{color} chai-font-bold chai-rounded-{val} chai-text-center