☕ ChaiCode Web Dev Cohort 2026

H5t-Talwinder

A lightweight utility-first CSS engine built in vanilla JS. Write chai-* classes. Get inline styles. No build step, no config.

Usage


        <script src="https://cdn.jsdelivr.net/gh/Hudater/h5t-talwinder@main/chai-h5t.js"></script>

↓ This page has demo elements styled using H5t-Talwinder. Toggle the button to see browser defaults.

⚡ Vanilla JS · DOM Manipulation · Zero Dependencies

01 — Typography

Font Sizes & Alignment

chai-text-{xs|sm|base|lg|xl|2xl|3xl|4xl} · chai-font-{light|normal|semibold|bold} · chai-text-{left|center|right}

chai-text-xs — 12px

chai-text-sm — 14px

chai-text-base — 16px. Default. The middle path.

chai-text-lg — 18px. Comfortable reading.

chai-text-xl — 20px. Getting prominent.

chai-text-2xl — 24px. Subheading territory.

chai-text-3xl — 30px. Bold statement.

chai-text-4xl — 36px. Main heading energy.

← Left aligned

Center aligned

Right aligned →

chai-font-light — Weight 300

chai-font-normal — Weight 400

chai-font-semibold — Weight 600

chai-font-bold — Weight 700

02 — Colors

Background & Text Colors

chai-bg-{color}-{shade} · chai-text-{color}-{shade} · Shades: 100–900

red
100–900

blue
100–900

green
100–900

yellow
100–900

purple
100–900

orange
100–900

gray
100–900

red-500

red-700

blue-500

blue-800

green-500

yellow-400

purple-600

orange-500

gray-800

black

white

03 — Spacing

Padding & Margin

chai-p-{n} chai-px-{n} chai-py-{n} chai-pt/pb/pl/pr-{n} · Same for margin (m) · 1 unit = 4px

p-1 / 4px

p-2 / 8px

p-4 / 16px

p-6 / 24px

p-8 / 32px

px-6 py-1

px-4 py-3

px-8 py-4

04 — Borders & Radius

chai-border & chai-rounded

chai-border-{1|2|4} · chai-rounded-{sm|md|lg|xl|full}

border 1px

border-2

border-4

rounded 4px

rounded-md

rounded-lg

rounded-xl

rounded-full

05 — Layout

Flexbox

chai-flex · chai-flex-col · chai-flex-wrap · chai-justify-{*} · chai-items-{*} · chai-gap-{n}

justify-between + items-center

Item 1

Item 2

Item 3

justify-center + gap-4 + flex-wrap

Center 1

Center 2

Center 3

flex-col + gap-2

Row 1

Row 2

Row 3

06 — Grid

chai-grid-cols-{n}

chai-grid · chai-grid-cols-{n} · chai-gap-{n}

grid-cols-3 + gap-4

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

grid-cols-4 + gap-3

07 — Width

chai-w-{fraction}

chai-w-full · chai-w-3/4 · chai-w-2/3 · chai-w-1/2 · chai-w-1/3 · chai-w-1/4

w-full — 100%

w-3/4 — 75%

w-2/3 — 66%

w-1/2 — 50%

w-1/3 — 33%

w-1/4 — 25%

08 — Combined

Real-world Components

Multiple utilities combined — cards, buttons, layout

Light Card

Built with chai-* utility classes. No external CSS, no custom styles anywhere.

Dark Card

Same structure, different utilities. Runtime DOM magic — no build step needed.

Total Utilities

60+

Spacing · Colors · Typography · Border · Layout