Install Colors Components Animations Usage Roadmap
v1.0.0 · Runtime CSS Engine

chai-choco
tailwind

A chocolate-themed runtime CSS utility engine. Drop in one script tag.
No build step, no config — just rich, warm styles.

Get Started View Example
Zero build step No config file ~4KB gzipped ESM + UMD

Get Started

Installation

Two ways to add chai-choco-tailwind to your project.

npm / yarn

$ npm install chai-choco-tailwind

Then import in your entry file:

import 'chai-choco-tailwind'

CDN / Script Tag (plain HTML)

<script type="module" src="https://unpkg.com/chai-choco-tailwind /dist/chai-choco-tailwind.esm.js" ></script>

Works in any plain HTML file — no bundler needed.

How it works

🔍

1. Scan

Engine reads all class="…" attributes from the DOM at runtime.

⚙️

2. Generate

Matches class names against the chocolate utility map and builds a CSS string.

💉

3. Inject

A single <style> tag is added to <head> — only what you use.

Design Tokens

Chocolate Palette

12 carefully tuned tones — from void-dark cocoa to warm latte cream.

#1a0a00
bg-void
#2C1810
bg-darkest
#3D1F10
bg-dark
#4A2515
bg-rich
#7B4A2D
bg-mid
#8B5E3C
bg-milk
#C68642
bg-caramel
#D4924A
bg-gold
#E8D5B7
bg-cream
#F5E6D3
bg-latte
#FFF8F0
text-light
#A0785A
text-muted

Gradients

bg-gradient
bg-gradient-warm
bg-gradient-gold

Typography

Type Scale

Font weights, transforms, letter-spacing, and dynamic sizes.

Font Weights

The richest dark chocolate

chai-choco-font-bold

A hint of caramel warmth

chai-choco-font-semibold

Smooth milk chocolate blends

chai-choco-font-medium

A delicate vanilla cream note

chai-choco-font-light

Transforms · Letter-spacing · Line-height

Premium Reserve · Single Origin

chai-choco-uppercase chai-choco-tracking-wider

Warm, wide letter spacing

chai-choco-tracking-wide

"Every bar tells a story of the bean."

chai-choco-italic

Smooth creamy texture with a warm finish that lingers long after.

chai-choco-leading-relaxed

Compact. Dense. Every line tightly bound.

chai-choco-leading-snug

Dynamic Size Scale — chai-choco-text-{n} sets font-size to npx

Aa
chai-choco-text-12 12px
Aa
chai-choco-text-14 14px
Aa
chai-choco-text-16 16px
Aa
chai-choco-text-20 20px
Aa
chai-choco-text-28 28px
Aa
chai-choco-text-36 36px

Components

Cards

Three card variants — dark chocolate, cream latte, and glassmorphism.

New Dark Choco

Dark Chocolate

Rich, intense cocoa with a smooth finish.

Bestseller Cream Latte

Milk Chocolate

Smooth, creamy, and sweet. A classic blend.

Limited Glass

Caramel Fusion

Dark chocolate meets golden caramel.

chai-choco-card · chai-choco-card-cream · chai-choco-card-glass

Components

Buttons

Three variants, two size modifiers, and animated states.

Variants

chai-choco-btn

chai-choco-btn-outline

chai-choco-btn-ghost

Sizes

chai-choco-btn-sm

default

chai-choco-btn-lg

Animated

glow-pulse

shimmer

bounce

Components

Badges

Four badge variants for status, labels, and tags.

Default Caramel Cream Dark chip tag
chai-choco-badge · badge-caramel · badge-cream · badge-dark · chai-choco-chip

Components

Inputs

Dark and cream input variants with caramel focus rings.

Dark input

Click to see caramel focus ring →

Cream input

Click to see caramel focus ring →

Visual Effects

Shadows

Five shadow depths — from whisper-soft to full caramel glow.

shadow-soft

shadow-md

shadow-hard

shadow-caramel

shadow-glow

Spacing

Dynamic Spacing

chai-choco-p-{n} and chai-choco-m-{n} → n × 4px.

Padding scale

chai-choco-p-1
4px
chai-choco-p-2
8px
chai-choco-p-4
16px
chai-choco-p-6
24px
chai-choco-p-8
32px
chai-choco-p-10
40px

Also available

chai-choco-pt-{n} padding-top
chai-choco-pb-{n} padding-bottom
chai-choco-px-{n} padding left+right
chai-choco-py-{n} padding top+bottom
chai-choco-m-{n} margin (all sides)
chai-choco-mt/mb/mx/my-{n}
chai-choco-gap-{n} flex/grid gap

Motion

Animations

Eight animations — all GPU-accelerated.

✨
fade-in
⬆️
slide-up
➡️
slide-in
🎯
bounce
💓
pulse
🌟
glow-pulse
🍫
shimmer
⚙️
spin

Motion

Interactions

Hover each box to see its effect.

hover-lift
↑ translateY(-5px)
hover-scale
↔ scale(1.05)
hover-glow
✦ caramel glow
hover-bright
☀ brightness(1.12)

Layout

Layout Utilities

Flex and grid helpers for common layouts.

chai-choco-flex-center

Centered
Content

chai-choco-flex-between

Left
Right

chai-choco-grid-3

Col 1
Col 2
Col 3

Quick Start

Complete Example

A full working HTML file — copy, paste, open in browser.

index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Choco Page</title> <script type="module" src="https://unpkg.com/chai-choco-tailwind/dist/chai-choco-tailwind.esm.js" ></script> </head> <body class="chai-choco-bg-void"> <div class="chai-choco-flex-center chai-choco-p-10"> <div class="chai-choco-card chai-choco-stack"> <span class="chai-choco-badge-caramel">New</span> <h1 class="chai-choco-font-bold chai-choco-text-32 chai-choco-text-caramel"> Hello, Choco World! 🍫 </h1> <p class="chai-choco-text-muted chai-choco-leading-relaxed"> Runtime CSS. No build step. Just drop in the script tag. </p> <button class="chai-choco-btn chai-choco-glow-pulse"> Get Started </button> </div> </div> </body> </html>

Reference

All Classes

Click any class name to copy it to your clipboard.

Backgrounds

Text Colors

Layout

Spacing — dynamic (n × 4px)

Typography

Borders & Shadows

Buttons

Cards · Badges · Inputs

Animations

Interactions

Roadmap

This is just the beginning 🍫

v1.0 is live — and we're just getting started. Here's what's brewing in the next versions.

🍫
Current · v1.0 → Coming · v2.0

Something amazing is brewing ☕

We're building the most deliciously designed CSS utility engine. More components, dark/light mode support, a CLI tool, and a live playground — all chocolate-flavoured.

🎨
Dark & Light Mode
Auto-switching themes with chai-choco-dark and chai-choco-light root classes. Respects system preference too.
v1.1
🧩
More Components
Tooltips, modals, dropdowns, tabs, accordions, and a full navigation component — all in the choco palette.
v1.2
⚡
CLI Tool
Generate a custom choco.config.js to extend the palette, add custom classes, and purge unused utilities at build time.
v1.3
🖥️
Live Playground
A browser-based editor where you write HTML with chai-choco-* classes and see the output live — shareable via URL.
v2.0
📐
Responsive Utilities
chai-choco-sm-*, md-*, lg-* breakpoint modifiers so every utility responds to screen size.
v1.2
🔌
Framework Plugins
Official plugins for React, Vue, and Svelte that integrate chai-choco-tailwind with hot-reload support out of the box.
v2.0

Want to be notified when new versions drop?

⭐ Star on GitHub