Utility-class engine.
Zero stylesheets.

How it works

1. 1

   Scan the DOM

   On init, document.querySelectorAll('*') walks every element. Each element's classList is checked against customStyles.

2. 2

   Match and parse

   On a hit, the CSS string like "padding: 8px; margin: 0" is split on ; and each declaration is set with el.style.setProperty(). Safer than writing to cssText.

3. 3

   Watch for changes

   A MutationObserver watches childList, subtree, and class attribute changes. Dynamically added elements get styled too.

Typography

Heading 1 - chai-text-4xl

Heading 2 - chai-text-3xl

Heading 3 - chai-text-2xl

This is body text. Class: chai-text-base chai-text-gray. Scanned at runtime, injected inline. No stylesheet touched.

Small italic text - chai-text-sm chai-italic

Colors

The original example

This is the exact use case from the spec. Inspect this heading - it has no stylesheet, just a class and a data attribute.

hello world

<h1 class="chai-p-2 chai-text-2xl chai-font-bold ...">
  hello world
</h1>

↓ After chai-wind runs:

<h1 class="chai-p-2 ..."
    style="padding: 8px; font-size: 24px; font-weight: 700; ..."
    data-chai-applied="chai-p-2 chai-text-2xl chai-font-bold ...">
  hello world
</h1>

MutationObserver - dynamic injection

Click the button. A new element is created and injected into the DOM after the initial scan. The MutationObserver catches it and styles it automatically.

Runtime register()

You can register new classes at runtime via ChaiWind.register(). The element below has class chai-custom-card which doesn't exist yet - click to define and apply it.