Configuration

There are three ways to configure chaiTailwind, in order of increasing power.

1 — Script-tag attributes

For simple pages, just put data-chai-* attributes on the script tag.

<script
  src="chai.js"
  data-chai-prefix="cw-"
  data-chai-keep-classes="true"
  data-chai-warn="true"
  data-chai-observe="true"
></script>

Attribute	Default	Effect
data-chai-prefix	chai-	Class-name prefix the engine looks for.
data-chai-keep-classes	false	Keep the chai-* classes on elements after applying styles.
data-chai-observe	true	Use MutationObserver to style new nodes.
data-chai-auto-start	true	Whether to scan automatically on load. Set "false" if you want to call chai.start() yourself.
data-chai-warn	false	Log a console warning for unknown chai-* classes. Useful while developing.

2 — Meta tag with JSON

For everything that won’t fit in a flat attribute (e.g. a custom palette), put a JSON blob on a meta tag.

<meta name="chai-config" content='{"prefix":"cw-","keepClasses":true,"warn":true}'>
<script src="chai.js"></script>

The meta tag is parsed before auto-start.

3 — Programmatic

For full control, skip auto-init and construct the engine yourself.

import { Chai } from 'chaitailwind';

const engine = new Chai({
  prefix: 'cw-',
  keepClasses: false,
  observe: true,
  autoStart: false,
  warn: true,
  theme: {
    colors: { brand: '#ff6633' },
    fontSize: { hero: '120px' }
  },
  rules: [
    // any (token, theme) => style|null function
    (token) => token === 'spin' ? { animation: 'spin 1s linear infinite' } : null
  ]
});

engine.start();   // begin scanning + observing
// engine.stop(); // disconnect later

Disable the auto-init by setting data-chai-auto-start="false" on the script tag, or by importing the Chai class directly without ever evaluating the auto-init path.

Choosing where to configure

• One-off prototypes → script-tag attributes.
• Shared palette / extended utilities → meta tag, or build a small wrapper file that imports the library and constructs your own Chai.
• Inside a JS framework → programmatic, with autoStart: false and lifecycle methods you control.