Web Dev Cohort 2026 · Assignment Project

Chai
Tail
Win DT89

A zero-dependency, utility-first CSS engine in vanilla JS. Write chai-p-4, chai-bg-blue-500, chai-flex — the engine scans your DOM and applies inline styles automatically. No build step. No config. No npm.

150+Utilities
0Dependencies
~5kbSize
4Files
index.html
1<script type="module" src="main.js"></script>
2
3<div class="chai-flex chai-items-center chai-gap-4">
4  <div class="chai-bg-blue-500
5          chai-text-white
6          chai-p-6
7          chai-rounded-xl">
8    Hello, ChaiTailwind
9  </div>
10</div>
01

Hover any utility — see it live

Spacing — Padding
chai-p-14px
chai-p-28px
chai-p-416px
chai-p-624px
chai-p-832px
chai-p-1248px
chai-px-8horizontal
chai-py-8vertical
chai-pt-4top
chai-pb-4bottom
chai-pl-4left
chai-pr-4right
Spacing — Margin
chai-m-28px
chai-m-416px
chai-mx-8horizontal
chai-my-8vertical
chai-mt-4top
chai-mb-4bottom
Background
chai-bg-red-500#ef4444
chai-bg-red-100#fee2e2
chai-bg-blue-500#3b82f6
chai-bg-blue-100#dbeafe
chai-bg-green-500#22c55e
chai-bg-purple-500#a855f7
chai-bg-yellow-500#eab308
chai-bg-orange-500#f97316
chai-bg-teal-500#14b8a6
chai-bg-cyan-500#06b6d4
chai-bg-indigo-500#6366f1
chai-bg-rose-500#f43f5e
chai-bg-amber-500#f59e0b
chai-bg-lime-500#84cc16
chai-bg-gray-900#111827
chai-bg-gray-100#f3f4f6
Typography — Size
chai-text-2xs0.625rem
chai-text-xs0.75rem
chai-text-sm0.875rem
chai-text-base1rem
chai-text-lg1.125rem
chai-text-xl1.25rem
chai-text-2xl1.5rem
chai-text-3xl1.875rem
chai-text-4xl2.25rem
chai-text-5xl3rem
chai-text-6xl3.75rem
Typography — Weight
chai-font-thin100
chai-font-extralight200
chai-font-light300
chai-font-normal400
chai-font-medium500
chai-font-semibold600
chai-font-bold700
chai-font-extrabold800
chai-font-black900
Typography — Line Height
chai-leading-none1
chai-leading-tight1.25
chai-leading-normal1.5
chai-leading-relaxed1.625
chai-leading-loose2
Typography — Letter Spacing
chai-tracking-tighter-0.05em
chai-tracking-normal0em
chai-tracking-wide0.05em
chai-tracking-widest0.1em
Typography — Decoration & Transform
chai-uppercaseuppercase
chai-lowercaselowercase
chai-capitalizecapitalize
chai-underlineunderline
chai-line-throughline-through
chai-italicitalic
chai-truncateellipsis
Typography — Color
chai-text-red-500#ef4444
chai-text-blue-500#3b82f6
chai-text-green-500#22c55e
chai-text-gray-500#6b7280
Border
chai-border1px solid
chai-border-22px
chai-border-44px
chai-border-88px
chai-border-ttop
chai-border-bbottom
chai-border-lleft
chai-border-rright
chai-border-blue-500#3b82f6
chai-border-red-500#ef4444
chai-border-dasheddashed
chai-border-dotteddotted
Border Radius
chai-rounded-none0px
chai-rounded4px
chai-rounded-md6px
chai-rounded-lg8px
chai-rounded-xl12px
chai-rounded-2xl16px
chai-rounded-3xl24px
chai-rounded-full9999px
chai-rounded-t-xltop
chai-rounded-b-xlbottom
Shadow
chai-shadow-smsmall
chai-shadow-mdmedium
chai-shadow-lglarge
chai-shadow-xlextra large
chai-shadow-2xl2x large
chai-shadow-innerinner
chai-shadow-nonenone
Opacity
chai-opacity-100.1
chai-opacity-200.2
chai-opacity-400.4
chai-opacity-600.6
chai-opacity-750.75
chai-opacity-1001
Display
chai-flexflex row
chai-flex-colflex column
chai-flex-row-reverserow reversed
chai-flex-col-reversecol reversed
chai-flex-wrapwrap
chai-items-centercentered
chai-items-startflex-start
chai-items-endflex-end
chai-justify-betweenspace-between
chai-justify-aroundspace-around
chai-justify-evenlyspace-evenly
Gap
chai-gap-14px
chai-gap-28px
chai-gap-416px
chai-gap-624px
chai-gap-832px
chai-gap-x-4col gap
chai-gap-y-4row gap
Grid
chai-cols-22-col grid
chai-cols-33-col grid
chai-cols-44-col grid
Width & Height
chai-w-1664px
chai-w-32128px
chai-w-full100%
chai-h-1664px
chai-h-32128px
chai-w-fitfit-content
chai-aspect-square1:1
chai-aspect-video16:9
Position
chai-relativerelative
chai-absoluteabsolute
chai-stickysticky
Z-Index
chai-z-00
chai-z-1010
chai-z-5050
chai-z-modal100
chai-z-toast200
chai-z-tooltip300
Overflow
chai-overflow-hiddenhidden
chai-overflow-autoauto
chai-overflow-x-hiddenx hidden
chai-overflow-y-autoy auto
Transitions
chai-transitionall 150ms
chai-transition-colorscolors 300ms
chai-transition-opacityopacity 300ms
chai-transition-transformtransform 300ms
chai-duration-7575ms
chai-duration-300300ms
chai-duration-700700ms
chai-ease-linearlinear
chai-ease-in-outin-out
chai-ease-bouncebounce
Transform
chai-scale-750.75
chai-scale-1101.1
chai-scale-1251.25
chai-rotate-4545deg
chai-rotate-9090deg
chai-rotate-180180deg
chai-translate-x-6+24px X
chai-translate-y-4-16px Y
Visibility & Misc
chai-visiblevisible
chai-invisiblehidden
chai-cursor-pointerpointer
chai-cursor-not-allowednot-allowed
chai-pointer-events-nonenone
chai-select-noneno select
chai-object-covercover
chai-box-borderborder-box
content
Hover a utility
Computed CSS
← hover any class on the left
02

How it works

01
index.html
Browser loads the page
A single <script type="module"> tag. The browser's native ES module support handles all imports — no bundler, no npm, no build step.
→
02
main.js
Engine initialises
Waits for DOMContentLoaded, then calls scanDOM() for existing elements and watchDOM() for anything added later.
→
03
engine.js
DOM is scanned
querySelectorAll('[class*="chai-"]') finds every element. A MutationObserver keeps watching for new nodes at runtime.
→
04
rules.js + config.js
Class becomes style
parseClass("bg-blue-500") returns { backgroundColor: "#3b82f6" }. Object.assign(el.style, styles) writes it to the DOM element.
03

Get started

1
CDN — jsDelivr
<script type="module" src="https://cdn.jsdelivr.net/gh/KARDT89/chai-tailwind@latest/src/main.js"></script>
drop it in your <head> — no build step, no setup
2
Clone the repo
git clone https://github.com/KARDT89/chai-tailwind
or download the ZIP from GitHub
3
Write classes, done
<div class="chai-flex chai-p-4 chai-bg-blue-500">
no config, no compilation, no setup
Project structure
chai-tailwind/
  ├── index.html ← your HTML page
  ├── main.js ← entry point (8 lines)
  └── src/
      ├── config.js ← colors, spacing, sizes
      ├── rules.js ← parseClass() pure fn
      └── engine.js ← DOM scan + observe
Live demo → GitHub