chaiwindjs

A runtime CSS utility engine - apply Tailwind-style chai-* class names as inline styles, with no build step, no stylesheet, and no configuration.

Just drop in the script, add classes, done.

Installation

npm install chaiwindjs

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/chaiwindjs/chai-wind.js"></script>

Usage

CDN / Script tag

<script src="https://cdn.jsdelivr.net/npm/chaiwindjs/chai-wind.js"></script>
<script>
  ChaiWind.init();
</script>

ES Module / bundler

import ChaiWind from "chaiwindjs";
// or: const ChaiWind = require("chaiwindjs");

ChaiWind.init();

Then use classes directly in your HTML:

<div
  class="chai-flex chai-items-center chai-gap-4 chai-p-4 chai-bg-white chai-rounded-lg chai-shadow-md"
>
  <p class="chai-text-lg chai-font-semibold chai-text-ink">Hello, ChaiWind!</p>
</div>

API

ChaiWind.init(options?)

Scans the DOM, applies all matching chai-* classes as inline styles, and starts watching for future DOM changes.

ChaiWind.init();

// With options:
ChaiWind.init({
  debug: true, // logs matches to the console (default: false)
  styles: {
    // extend with custom classes at init time
    "my-card": "border-radius: 12px; padding: 24px; background: #fff",
  },
});

ChaiWind.register(styles)

Register additional custom classes at any time after init. Immediately applied to any matching elements already in the DOM.

ChaiWind.register({
  "my-badge":
    "font-size: 12px; background: #f97316; color: #fff; padding: 2px 8px; border-radius: 9999px",
  "my-card": "border-radius: 12px; padding: 24px; background: #fff",
});

ChaiWind.refresh()

Re-scans the entire DOM. Useful after surgically modifying HTML outside of React/Vue reactivity.

ChaiWind.refresh();

ChaiWind.listClasses()

Prints all registered classes and their styles to the console as a table. Great for debugging.

ChaiWind.listClasses();

Built-in Classes

| Category | Examples | | ------------ | --------------------------------------------------------------------------------------- | | Spacing | chai-p-2, chai-px-4, chai-m-4, chai-mx-auto | | Sizing | chai-w-full, chai-h-screen, chai-max-w-xl | | Typography | chai-text-lg, chai-font-bold, chai-uppercase, chai-text-center | | Colors | chai-text-orange, chai-bg-dark, chai-text-white | | Flexbox | chai-flex, chai-flex-col, chai-items-center, chai-justify-between, chai-gap-4 | | Borders | chai-border, chai-rounded-lg, chai-rounded-full | | Shadows | chai-shadow, chai-shadow-md, chai-shadow-lg | | Display | chai-block, chai-hidden, chai-overflow-hidden | | Position | chai-relative, chai-absolute, chai-fixed | | Effects | chai-transition, chai-opacity-50, chai-cursor-pointer | | Neobrutalist | chai-neo-shadow, chai-border-neo, chai-bg-cream, chai-bg-ink |

License

MIT