ChaiTailwind Demo Page

This page demonstrates all utility classes supported by H5t-Talwinder , a lightweight utility-first CSS engine.

Typography

text-xs = 12px

text-sm = 14px

text-base = 16px

text-lg = 18px

text-xl = 20px

text-2xl = 24px

text-3xl = 30px

text-4xl = 36px

Center aligned text

Right aligned text

Colors

bg-red-500

bg-blue-500

bg-green-500

bg-yellow-400

bg-purple-500

bg-gray-800

Spacing

p-1 (4px)

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

px-2 py-1

px-4 py-2

px-8 py-4

Borders & Radius

border

border-2

border-4

rounded

rounded-md

rounded-xl

rounded-full

Layout — Flexbox

Item 1

Item 2

Item 3

Center 1

Center 2

Center 3

Layout — Grid

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Width

w-full

w-1/2

w-1/3

Combined — Card Example

Card Title

This is a demo card built using only chai-* utility classes. No external CSS used.

Dark Card

Same structure, different color utilities applied.