ChaiTailwind

// hover states

Hover over each button — styles applied by chai-hover-* via JS event listeners.

// group hover

Hover the cards — child elements react via chai-group + chai-group-hover-*.

★

Hover this card

Icon and title change on parent hover.

project

Arjuna Agri

AI-powered precision agriculture.

status

All systems go

268 elements styled. 0 classes left.

// animations

Keyframes injected once into <head> by chai.js on load.

spin

ping

pulse

bounce

fade in

fade-in

slide up

slide-up

// responsive

Resize the window — background changes at each breakpoint.

<640px red · sm blue · md green · lg purple

Padding grows at md — chai-md-p-8

// colors

red

orange

yellow

green

teal

blue

indigo

purple

pink

gray

white

black

custom hex — chai-bg-[#hexcode]

#ff6347

#7c3aed

#0f766e

#b45309

// components

Nawazish Khan

Full-stack Developer

Next.js TypeScript Node.js

Portfolio nawazishkhan.in

GitHub nawazish2

Cohort ChaiCode HQ 2026

Notifications 3

★

New bounty posted

ChaiCode HQ · 2 hrs ago

✓

Assignment submitted

GitHub Classroom · 5 hrs ago

Deadline in 24hrs

ChaiTailwind · 22 Mar

utilities

42+

↑ supported

file size

~4kb

minified

deps

pure JS

// typography

font sizes

Aachai-text-3xl

Aachai-text-2xl

Aachai-text-xl

Aachai-text-base

Aachai-text-sm

weights

chai-font-bold

chai-font-semibold

chai-font-normal

chai-font-italic

chai-underline

chai-uppercase