MeawWind

MeawWind is a lightweight, runtime utility-class engine for the browser — no build tools, no config files, no CSS to write. Just add chai- classes to your HTML and styles are applied instantly.

How it works

MeawWind scans your HTML for classes prefixed with chai- and applies the corresponding inline styles at runtime using JavaScript. It also watches for DOM changes via MutationObserver, so dynamically added elements are styled automatically.

Installation

npm install meawwind

Quick Start

Step 1 — Import once in your entry file (or a <script type="module"> tag):

import "meawwind";

Step 2 — Use chai- classes directly in your HTML:

<div class="chai-bg-red-500 chai-p-4 chai-rounded-xl chai-text-white">
  Hello, MeawWind!
</div>

That's it. No build step needed.

Explicit Initialization (Optional)

MeawWind auto-initializes on DOMContentLoaded. If you need to trigger it manually:

import { initMeawWind } from "meawwind";

initMeawWind();

Supported Utilities

| Category | Classes | |----------------|---------| | Width / Height | chai-w-*, chai-h-* | | Padding | chai-p-*, chai-px-*, chai-py-*, chai-pt-*, chai-pr-*, chai-pb-*, chai-pl-* | | Margin | chai-m-*, chai-mx-*, chai-my-*, chai-mt-*, chai-mr-*, chai-mb-*, chai-ml-* | | Gap | chai-gap-*, chai-gap-x-*, chai-gap-y-* | | Colors | chai-bg-*, chai-text-*, chai-border-* | | Borders | chai-b-*, chai-rounded-* | | Typography | chai-font-*, chai-text-left\|center\|right\|justify | | Layout | chai-flex, chai-flex-col, chai-items-*, chai-justify-* | | Positioning | chai-static, chai-relative, chai-absolute, chai-fixed, chai-sticky, chai-top-*, chai-right-*, chai-bottom-*, chai-left-* | | Display | chai-block, chai-inline, chai-inline-block, chai-hidden | | Shadows | chai-shadow-* | | Opacity | chai-opacity-* | | Z-Index | chai-z-* | | Cursor | chai-cursor-* |

Arbitrary Values

Use bracket notation for custom values:

<div class="chai-bg-[#1a1a2e] chai-w-[320px] chai-shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
  Custom styles
</div>

Use underscores _ in place of spaces inside brackets.

Hover & Focus States

<button class="chai-bg-white hover:chai-bg-gray-100">Hover me</button>
<input class="chai-border focus:chai-border-blue-500">

Module Formats

MeawWind ships both ESM and CJS outputs:

// ESM (default)
import "meawwind";

// CJS
require("meawwind");

| Format | File | |--------|------| | ESM | dist/index.js | | CJS | dist/index.cjs |

Local Development

# Install dependencies
npm install

# Build once
npm run build

# Build and watch for changes
npm run build:watch

# Serve the docs locally
npx serve docs

Publishing

Running npm publish automatically triggers prepublishOnly, which runs a fresh production build. Only the files listed in the files field of package.json are included in the published package (dist/ and README.md).