v1.0 · CSS Engine

CHAI
TAIL
WIND

A custom utility-class engine powered by pure DOM API.
Add chai-* classes to any element and watch styles snap into place — no build step, no PostCSS.

121

utility classes · zero dependencies

01

Spacing — padding & margin

Padding chai-p-2
Padding chai-p-4
Padding chai-p-8
Padding chai-p-10
Margin chai-m-2
Margin chai-m-4
Margin chai-m-8
Margin chai-m-10
02

Typography — size, weight & align

chai-text-sm
20px
The quick brown fox
chai-text-md
30px
The quick brown fox
chai-text-lg
50px
The quick
chai-text-xl
60px
Chai.
chai-text-left

Left aligned text flows from the edge.

chai-text-center

Center aligned text sits in the middle.

chai-text-right

Right aligned text ends at the edge.

chai-font-sans · Sans Serif chai-font-sans
chai-font-mono · Monospace chai-font-mono
chai-font-serif · Serif chai-font-serif
Regular
Chai utility
chai-font-bold
Chai utility
03

Colors — text & background

Text Colors

chai-text-white
chai-text-black
chai-text-red
chai-text-pink
chai-text-gray

Background Colors

chai-bg-black
chai-bg-red
chai-bg-pink
04

Decoration — underline, overline & strike

chai-underline-1 / 2 / 3 Underline 1px Underline 2px Underline 3px
chai-overline-1 / 2 / 3 Overline 1px Overline 2px Overline 3px
chai-line-through-1 / 2 / 3 Strike 1px Strike 2px Strike 3px
05

Borders — width, style & color

Border Widths (solid black)

chai-border-1

chai-border-2

chai-border-3

chai-border-4

chai-border-5

Border Styles (4px)

chai-border-solid

chai-border-dashed

chai-border-dotted

chai-border-double

Border Colors (3px solid)

black

red

pink

blue

gray

white

Border Radius

chai-rounded-sm
2px

chai-rounded-md
8px

chai-rounded-lg
15px

chai-rounded-xl
20px

06

Layout — flex, gap & alignment

chai-flex · chai-gap-8

A
B
C

chai-flex · chai-flex-col · chai-gap-4

Row 1
Row 2
Row 3

chai-flex · chai-justify-center

▲
▲

chai-flex · chai-items-center · chai-gap-8

Short
Tall
Mid

chai-flex · chai-flex-wrap · chai-gap-4

one
two
three
four
five
six

chai-grid (CSS grid)

Col A
Col B
Col C
Col D

Width utilities

w-2 · 20px
w-4 · 40px
w-8 · 80px
w-full · 100%
07

Display — block, hidden & more

Display chai-block
Block element
Below block
Display chai-flex
A
B
Display chai-hidden
You cannot see me
← element is hidden
Display chai-grid
1
2
3
4
08

Positioning — relative, absolute & z-index

chai-relative + chai-absolute

top-1, left-1
bottom-1, right-1
top-3, left-2

chai-z-1 / chai-z-5 / chai-z-10

z-1
z-5
z-10
09

Object Fit — contain, cover & fill

contain demo
chai-object-contain
cover demo
chai-object-cover
fill demo
chai-object-fill
none demo
chai-object-none
10

Misc — box-sizing & cursor

chai-box-border vs chai-box-content

box-border
160px total
box-content
160px + padding

chai-cursor-pointer

HOVER ME →