Chai class

Chai is the engine. The library auto-creates a default instance (chai) and starts it on load — but you can also instantiate it yourself for full control.

Constructor

new Chai(options?: {
  prefix?: string;        // default: 'chai-'
  keepClasses?: boolean;  // default: false
  observe?: boolean;      // default: true
  autoStart?: boolean;    // default: true
  warn?: boolean;         // default: false
  theme?: ThemeOverride;  // default: built-in theme
  rules?: Array<Rule>;    // default: []
});

Each option is described in Configuration.

Methods

start()

Begin scanning the document and (if observe is true) attach the MutationObserver. Idempotent — calling twice is a no-op. If the document is still loading, it defers until DOMContentLoaded.

chai.start();

stop()

Disconnect the observer. Inline styles already applied are kept on elements.

chai.stop();

scan(root?)

Walk a subtree (default: document.body) and apply chai-* styles to every element found. Returns the number of classes successfully applied.

chai.scan();                           // whole body
chai.scan(document.getElementById('app'));

apply(element)

Apply styles to a single element based on its current chai-* class list. Returns the number of classes matched.

const el = document.getElementById('btn');
el.classList.add('chai-bg-saffron');
chai.apply(el);

parse(className)

Run the parser without touching the DOM. Returns the resolved style object or null.

chai.parse('chai-p-4');             // → { padding: '4px' }
chai.parse('chai-bg-red-500');      // → { backgroundColor: '#ef4444' }
chai.parse('chai-not-a-real-class') // → null

Useful for tests, build-time checks, or building tooling around the engine.

extend(rule)

Register a custom rule. Three forms are accepted:

// 1. function form — most general
chai.extend((token, theme) => token === 'spin'
  ? { animation: 'spin 1s linear infinite' }
  : null);

// 2. static rule
chai.extend({ test: 'spin', style: { animation: 'spin 1s linear infinite' } });

// 3. pattern rule
chai.extend({
  pattern: /^rotate-(\d+)$/,
  build:   (m) => ({ transform: `rotate(${m[1]}deg)` })
});

Custom rules are tried before built-ins, so they win conflicts.

Properties

• chai.prefix — current prefix.
• chai.theme — merged theme object (defaults + your overrides).
• chai.keepClasses, chai.observe, chai.warn — current settings.

The default instance

When the library is loaded as a <script>, it creates a default instance with config from script-tag attributes / meta tag and starts it automatically. Both the class and the instance are exposed on window:

window.Chai   // the class
window.chai   // the running default instance

When importing as a module:

import { Chai, chai } from 'chaitailwind';
import chai from 'chaitailwind';        // default export = the running instance