npm package: @ritam369/chaiwinder
Description: A lightweight utility-first CSS engine that converts chai-* class names into inline styles via DOM manipulation.
Author: Ritam Saha
Latest version: 1.0.0

# 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

```bash
npm install @ritam369/chaiwinder
```

## Usage Options

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

```js
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:

```html
<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):

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

```js
// 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:

```js
import "./chaiEngine.js";
```

Then use `chai-*` classes directly in your HTML:

```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