🍵
TeaWind CSS
Write
chai-
classes. Get instant inline styles.
Zero build, zero stress.
⚡
~1ms init
🔄
MutationObserver
📦
Zero dependencies
🧹
Self-cleaning DOM
$
npm install teawindcss
// This entire page is styled exclusively with chai- classes
Why TeaWind
CSS without the stress.
Whenever styling gets overwhelming — take a sip, write a class, move on.
⚡️
~1ms Initialization
Map() cache — every class resolved once, retrieved instantly.
Hundreds of elements, still milliseconds.
🔄
MutationObserver
A DOM watchdog fires on every new node. React renders?
Styled instantly. No useEffect. No setup.
🧹
Self-Cleaning DOM
Every chai- class disappears after processing.
Open DevTools — only clean inline styles remain.
🎨
Built-in Palette
Every color has a -light and -dark variant.
Handpicked hex codes. No memorization needed.
🧠
Smart Dynamic Values
chai-p-24 → padding: 24px.
Numbers auto-convert to px. Strings like full pass through unchanged.
📦
Zero Dependencies
No PostCSS. No Webpack. No config.
One import 'teawindcss' and you're live.
Quick Start
Up in 30 seconds.
Three ways to use TeaWind — pick what fits.
Step 1
Install
$
npm install teawindcss
Step 2
Import Once
import
'teawindcss'
;
// auto-initializes. done.
Step 3
Write Classes
chai-flex chai-p-16
chai-bg-blue-dark
chai-rounded-xl
Manual Control — brew()
for React / dynamic HTML
import
{ brew }
from
'teawindcss'
;
// Manually process DOM after dynamic renders
brew
()
;
Color System
Every color. Two shades.
Append -light or -dark. TeaWind resolves the hex from the palette.
red
chai-bg-red-light
chai-bg-red-dark
blue
chai-bg-blue-light
chai-bg-blue-dark
green
chai-bg-green-light
chai-bg-green-dark
yellow
chai-bg-yellow-light
chai-bg-yellow-dark
orange
chai-bg-orange-light
chai-bg-orange-dark
purple
chai-bg-purple-light
chai-bg-purple-dark
pink
chai-bg-pink-light
chai-bg-pink-dark
slate
chai-bg-slate-light
chai-bg-slate-dark
subtle
chai-bg-subtle-dark — #292929
Utilities in Action
See the classes work.
Typography Scale
Text 6xl
48px — chai-text-6xl
Text 5xl
42px — chai-text-5xl
Text 4xl
36px — chai-text-4xl
Text 3xl
30px — chai-text-3xl
Text 2xl
24px — chai-text-2xl
Font Families
chai-font-dm-sans
chai-font-fraunces
chai-font-fira
chai-sans
chai-serif
chai-mono
Line Heights
chai-leading-none
Line one
Line two
Line three
chai-leading-tight
Line one
Line two
Line three
chai-leading-normal
Line one
Line two
Line three
chai-leading-relaxed
Line one
Line two
Line three
chai-leading-loose
Line one
Line two
Line three
bold
normal
thin
italic
underline
line-through
uppercase
Dynamic Spacing — any number works
p-4
p-8
p-16
p-24
p-32
p-48
p-64
chai-p-3, chai-p-7, chai-p-100 — any number, automatic px conversion.
Same for chai-m-* and chai-gap-*.
Border Radius
xs
2px
sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
4xl
32px
Shadows (light background to see depth)
Flexbox
chai-flex · chai-justify-between · chai-items-center · chai-gap-16 · chai-flex-wrap
chai-bg-blue-dark
chai-bg-purple-dark
chai-bg-green-dark
chai-bg-orange-dark
Live Demo
Zero inline styles on this card.
Open DevTools after the page loads. Every chai- class will be gone.
🍵
TeaWind CSS
Utility-first styling in Vanilla JS.
Zero config. Zero stress.
npm
free
v1.0
npm install teawindcss
// Classes on the card ←
chai-bg-slate-dark
→ background-color: #334155
chai-p-40
→ padding: 40px
chai-rounded-2xl
→ border-radius: 16px
chai-shadow-xl
→ box-shadow: ...
chai-font-fraunces
→ font-family: 'Fraunces', serif
chai-leading-relaxed
→ line-height: 1.625
chai-bg-yellow-light
→ background-color: #fef08a
→ Inspect in DevTools
→ Zero chai- classes remain
→ Only clean inline styles
→ That's TeaWind 🍵