ChaiTailwind

ChaiTailwind is a lightweight, utility-first CSS framework powered by JavaScript.

It parses classes at runtime and injects CSS rules directly into the page, so you can use utility classes without a build step.

Table of Contents

• Overview
• Key Features
• How It Works
• Project Structure
• Installation
• Quick Start
• Class Naming Rules
• Variants and Breakpoints
• Utility Reference by Property
• Numeric Scale and Value Mapping
• Color System
• Opacity Syntax
• Typography Scale
• Animation Controls
• Practical Examples
• Runtime API
• Notes and Limitations
• Local Development
• License

Overview

• All utilities are prefixed with chai-
• Styles are generated from class names at runtime
• Includes layout, spacing, sizing, color, typography, position, grid, and motion utilities
• Supports responsive and state variants in the same class

Key Features

• No bundler or compile step required
• Utility-first class workflow
• Runtime class scanning plus MutationObserver support for dynamic DOM updates
• Responsive variants: sm, md, lg, xl
• State variants: hover, group-hover, dark
• Animation, speed, delay, duration, and easing controls

How It Works

1. ChaiTailwind scans class names that contain chai-
2. It parses utility tokens and optional variants
3. It builds CSS rules and injects them into one runtime style tag
4. It keeps scanning new/updated nodes via MutationObserver

The runtime writes utility declarations with !important to ensure utility rules are consistently applied.

Project Structure

• chai.js: Runtime engine, parser, utility map, and injected keyframes
• index.html: Playground page with examples
• UTILITIES_REFERENCE.md: Exhaustive utility list generated from runtime behavior
• Readme.md: Documentation
• package.json: Package metadata

Installation

Add the runtime script to your page:

<script src="chai.js"></script>

No additional setup is required.

Quick Start

<div class="chai-p-20 chai-bg-blue-500 chai-text-white chai-rounded-lg">
  Hello from ChaiTailwind
</div>

<button
  class="chai-bg-green-500 chai-text-white chai-px-16 chai-py-8 chai-rounded-lg chai-transition chai-hover:bg-green-600"
>
  Hover me
</button>

Class Naming Rules

Base patterns:

• Static utility: chai-flex
• Numeric utility: chai-p-16
• Color utility: chai-bg-blue-500
• Variant utility: chai-md:hover:bg-blue-600 (internal form)
• Variant utility (recommended class form): chai-md-hover:bg-blue-600

ChaiTailwind accepts combined variants and base utility in one class string.

Variants and Breakpoints

State Variants

• hover-
• group-hover-
• dark-

Responsive Variants

• sm- = min-width 640px
• md- = min-width 768px
• lg- = min-width 1024px
• xl- = min-width 1280px

Variant Examples

<button class="chai-bg-blue-500 chai-hover:bg-blue-600 chai-transition">
  Hover
</button>

<div class="group">
  <span class="chai-text-gray-600 chai-group-hover:text-blue-600"
    >Group Hover</span
  >
</div>

<div
  class="chai-bg-gray-100 chai-dark:bg-gray-900 chai-text-black chai-dark:text-white"
>
  Dark mode aware block
</div>

<div class="chai-bg-gray-300 chai-md:bg-orange-500 chai-lg:bg-green-600">
  Responsive color change
</div>

Utility Reference by Property

This section focuses on what each utility family changes in CSS.

Display and Layout

| Class | CSS Property | Value | | ------------- | -------------- | ------------ | | chai-flex | display | flex | | chai-grid | display | grid | | chai-block | display | block | | chai-inline | display | inline-block | | chai-hidden | display | none | | chai-flex-col | flex-direction | column |

Alignment and Text Alignment

| Class | CSS Property | Value | | -------------------- | --------------- | ------------- | | chai-justify-between | justify-content | space-between | | chai-items-center | align-items | center | | chai-text-center | text-align | center |

Position

| Class | CSS Property | Value | | --------------- | ------------ | -------------------------- | | chai-relative | position | relative | | chai-absolute | position | absolute | | chai-fixed | position | fixed | | chai-top-{n} | top | derived from numeric scale | | chai-right-{n} | right | derived from numeric scale | | chai-bottom-{n} | bottom | derived from numeric scale | | chai-left-{n} | left | derived from numeric scale |

Spacing

| Class Family | CSS Property | | ------------ | --------------------------- | | chai-p-{n} | padding | | chai-px-{n} | padding-left, padding-right | | chai-py-{n} | padding-top, padding-bottom | | chai-m-{n} | margin | | chai-mx-{n} | margin-left, margin-right | | chai-my-{n} | margin-top, margin-bottom | | chai-gap-{n} | gap |

Sizing

| Class Family | CSS Property | | ------------ | ------------ | | chai-w-{n} | width | | chai-h-{n} | height | | chai-w-full | width | | chai-h-full | height |

Grid Columns

| Class Family | CSS Property | Value | | ------------- | --------------------- | -------------- | | chai-cols-{n} | grid-template-columns | repeat(n, 1fr) |

Supported by runtime for n = 1..12.

Typography

| Class | CSS Property | Value | | ------------------------- | ------------ | ------------------- | | chai-font-bold | font-weight | 700 | | chai-fs-{n} | font-size | mapped scale values | | chai-text-{color}-{shade} | color | palette color |

Background and Text Color

| Class Family | CSS Property | | ------------------------- | ---------------- | | chai-bg-{color}-{shade} | background-color | | chai-text-{color}-{shade} | color |

Border Color

| Class Family | CSS Property | | --------------------------- | ------------ | | chai-border-{color}-{shade} | border-color |

Note: Border color utilities set only border-color. You still need a border width/style from your own CSS or another utility source.

Radius

| Class | CSS Property | Value | | ----------------- | ------------- | ------ | | chai-rounded-lg | border-radius | 12px | | chai-rounded-full | border-radius | 9999px |

Transition and Motion

| Class | CSS Property / Behavior | | ------------------------ | ---------------------------------- | | chai-transition | transition: all .3s ease | | chai-animate-fade | fade-in keyframes | | chai-animate-slide-up | slide-up keyframes | | chai-animate-slide-down | slide-down keyframes | | chai-animate-slide-left | slide-left keyframes | | chai-animate-slide-right | slide-right keyframes | | chai-animate-scale | scale-in keyframes | | chai-animate-scale-out | scale-out keyframes | | chai-animate-rotate | rotate-in keyframes | | chai-animate-zoom-in | zoom-in keyframes | | chai-animate-zoom-out | zoom-out keyframes | | chai-animate-flip-x | flip-x keyframes + perspective | | chai-animate-flip-y | flip-y keyframes + perspective | | chai-animate-swing | swing keyframes + transform-origin | | chai-animate-pulse | pulse infinite | | chai-animate-bounce | bounce infinite | | chai-animate-heartbeat | heartbeat infinite | | chai-animate-flash | flash infinite | | chai-animate-shake | shake keyframes |

Numeric Scale and Value Mapping

For these utility families, numeric tokens are generated from 0 to 300:

• p, px, py
• m, mx, my
• w, h
• top, right, bottom, left
• gap

Mapping formula:

• n maps to n * 4px

Examples:

• chai-p-1 = padding: 4px
• chai-p-10 = padding: 40px
• chai-w-64 = width: 256px
• chai-top-20 = top: 80px

Color System

Available root colors include:

• gray
• red
• green
• blue
• indigo
• purple
• pink
• white
• black
• transparent

Palette shades are available for standard color families, typically from 50 to 900, with gray also including 950.

Examples:

<div class="chai-bg-blue-50 chai-text-blue-900 chai-p-12">Light surface</div>
<div class="chai-bg-blue-500 chai-text-white chai-p-12">Primary block</div>
<div class="chai-bg-gray-950 chai-text-gray-100 chai-p-12">Deep gray block</div>

Opacity Syntax

ChaiTailwind supports slash opacity for color utilities, converted to rgba at runtime.

Pattern:

• chai-bg-color-shade/opacity
• chai-text-color-shade/opacity
• chai-border-color-shade/opacity

Examples:

<div class="chai-bg-blue-500/20 chai-p-12">20 percent blue background</div>
<p class="chai-text-red-600/80">80 percent red text</p>
<div class="chai-border-blue-500/40">40 percent blue border color</div>

Typography Scale

Supported font-size utilities map as follows:

| Class | Value | | ---------- | -------- | | chai-fs-1 | 0.75rem | | chai-fs-2 | 0.875rem | | chai-fs-3 | 1rem | | chai-fs-4 | 1.125rem | | chai-fs-5 | 1.25rem | | chai-fs-6 | 1.5rem | | chai-fs-10 | 3rem |

Animation Controls

Use these helper utilities with animation classes:

Duration

• chai-duration-50
• chai-duration-75
• chai-duration-100
• chai-duration-150
• chai-duration-200
• chai-duration-300
• chai-duration-500
• chai-duration-700
• chai-duration-1000
• chai-duration-1500
• chai-duration-2000
• chai-duration-3000
• chai-duration-5000

Delay

• chai-delay-75
• chai-delay-100
• chai-delay-150
• chai-delay-200
• chai-delay-300
• chai-delay-500
• chai-delay-700
• chai-delay-1000

Easing

• chai-ease-linear
• chai-ease-ease
• chai-ease-ease-in
• chai-ease-ease-out
• chai-ease-ease-in-out

Speed Presets

• chai-speed-ultra-fast = 0.2s
• chai-speed-very-fast = 0.5s
• chai-speed-fast = 1s
• chai-speed-normal = 0.8s
• chai-speed-slow = 3s
• chai-speed-very-slow = 5s
• chai-speed-ultra-slow = 8s

Practical Examples

Card

<div class="chai-bg-white chai-rounded-lg chai-p-16">
  <h3 class="chai-fs-5 chai-font-bold chai-my-8">Card Title</h3>
  <p class="chai-text-gray-700 chai-my-12">
    Utility-first card using ChaiTailwind.
  </p>
  <button
    class="chai-bg-blue-500 chai-text-white chai-px-12 chai-py-8 chai-rounded-lg chai-hover:bg-blue-600 chai-transition"
  >
    Action
  </button>
</div>

Grid

<div class="chai-grid chai-cols-3 chai-gap-12">
  <div class="chai-bg-green-100 chai-p-12">A</div>
  <div class="chai-bg-green-200 chai-p-12">B</div>
  <div class="chai-bg-green-300 chai-p-12">C</div>
</div>

Responsive + Dark + Hover

<button
  class="chai-bg-blue-500 chai-md:bg-indigo-500 chai-dark:bg-gray-800 chai-hover:bg-blue-600 chai-text-white chai-px-12 chai-py-8 chai-rounded-lg chai-transition"
>
  Multi-variant button
</button>

Runtime API

When loaded in browser, ChaiTailwind exposes:

• window.ChaiCSS.init()
• window.ChaiCSS.scan(root?)
• window.ChaiCSS.destroy()
• window.ChaiCSS.toggleDarkMode()
• window.toggleDarkMode() shortcut

Example:

<button onclick="toggleDarkMode()">Toggle Theme</button>

Notes and Limitations

• This is a runtime utility framework, not a build-time compiler
• Utility coverage is defined by chai.js, not by an external config file
• Border color utilities do not create border width/style
• Some classes shown in old demos may not exist if they are not in chai.js
• For the exhaustive generated list, use UTILITIES_REFERENCE.md

Local Development

• Open index.html directly in your browser
• Add or edit classes in HTML and refresh
• Use UTILITIES_REFERENCE.md when you need complete utility coverage

License

MIT

Author

Ankit Kumar