chaiWinder

A lightweight utility-first CSS engine for the browser. Write chai-* class names in your HTML and chaiWinder converts them into inline styles automatically.

Install

npm install @ritam369/chaiwinder

Usage Options

1) Bundler / Framework apps (Vite, Webpack, Parcel, etc.)

import "@ritam369/chaiwinder";

This is the recommended npm usage.

2) Plain browser (no bundler)

In a plain browser setup, bare imports like import "@ritam369/chaiwinder" do not resolve automatically. Use one of these instead:

• Import from a CDN:

<script type="module">
  import "https://cdn.jsdelivr.net/npm/@ritam369/chaiwinder/chaiEngine.js";
</script>

• Or import from your local node_modules path (only if your server exposes it):

<script type="module" src="./app.js"></script>

// app.js
import "./node_modules/@ritam369/chaiwinder/chaiEngine.js";

3) Direct GitHub files (no npm)

You can copy/download chaiEngine.js and chaiClasses.js from this repository, keep them in the same folder, and import chaiEngine.js in your app:

import "./chaiEngine.js";

Then use chai-* classes directly in your HTML:

<div class="chai-bg-red chai-text-white chai-p-4 chai-rounded-md">
  Hello, chaiWinder!
</div>

Available Classes

Background Colors

| Class | Style | |---|---| | chai-bg-red | background-color: red | | chai-bg-blue | background-color: blue | | chai-bg-green | background-color: green | | chai-bg-yellow | background-color: yellow | | chai-bg-orange | background-color: orange | | chai-bg-purple | background-color: purple | | chai-bg-pink | background-color: pink | | chai-bg-gray | background-color: #6b7280 | | chai-bg-white | background-color: #ffffff | | chai-bg-black | background-color: #000000 |

Text Colors

chai-text-white chai-text-black chai-text-gray chai-text-red chai-text-blue chai-text-green chai-text-yellow

Font Size

chai-text-xs chai-text-sm chai-text-base chai-text-lg chai-text-xl chai-text-2xl chai-text-3xl chai-text-4xl

Font Weight

chai-font-thin chai-font-light chai-font-normal chai-font-medium chai-font-semibold chai-font-bold chai-font-extrabold

Spacing (Padding / Margin)

chai-p-{0-10} chai-px-{1-6} chai-py-{1-6} chai-m-{0-8} chai-mx-auto chai-my-{2,4} chai-mt-{2,4} chai-mb-{2-6}

Layout

chai-flex chai-grid chai-block chai-inline-block chai-hidden

Flexbox

chai-flex-col chai-flex-row chai-flex-wrap chai-items-center chai-justify-center chai-justify-between chai-gap-{1-8}

Border & Radius

chai-border chai-border-2 chai-border-4 chai-border-{color} chai-rounded-{sm|md|lg|xl|2xl|full}

Width / Height

chai-w-full chai-w-screen chai-w-half chai-w-1/3 chai-w-2/3 chai-h-full chai-h-screen

Utilities

chai-shadow-{sm|md|lg|xl} chai-opacity-{0|25|50|75|100} chai-cursor-pointer chai-transition chai-overflow-hidden chai-z-{0|10|20|50}

Full class list is in chaiClasses.js.

Notes

• chaiWinder applies styles on initial page load (DOMContentLoaded / immediate if already loaded).
• chai-* classes are removed after style application.

License

MIT