Chai-Wind

1.0.9 · active · verified Tue Apr 21

chai-wind is a utility-first CSS-in-JS library designed exclusively for browser environments, focusing on a zero-dependency, no-build-step approach to styling. It allows developers to apply inline CSS styles to HTML elements by using `chai-` prefixed class names, such as `chai-bg-22c55e` or `chai-f-20`. The library operates by scanning the DOM for these special class names upon `DOMContentLoaded` and converting them directly into `element.style` properties. Currently at version `1.0.9`, it appears to be in an active development phase, though specific release cadence isn't detailed. Its primary differentiator is the complete eschewal of traditional CSS files, build tools, and bundlers, making it highly suitable for quick prototyping or projects where a minimal setup is paramount.

Common errors

```
Uncaught TypeError: require is not a function
```
cause Attempting to use CommonJS `require()` syntax (`const chai = require('chai-wind');`) in an ES Module context or directly in a browser without a bundler.

fix Use ES Module `import` syntax: `import { applyChaiStyles } from 'chai-wind';` and ensure your script tag has `type="module"` or your build setup supports ESM.
```
Styles are not applied to elements with `chai-` classes.
```
cause `applyChaiStyles()` was not called, or there might be an issue with script loading order preventing its execution.

fix Ensure `applyChaiStyles()` is called once in your script. Although it uses `DOMContentLoaded`, verify your script loads correctly and executes. Place the `<script type="module">` tag at the end of the `<body>`.
```
My custom CSS is not working; `chai-wind` styles are always winning.
```
cause `chai-wind` applies styles as inline `element.style` properties, which have the highest specificity in CSS and will override almost any other style rule.

fix Understand that inline styles take precedence. If you absolutely need to override `chai-wind` with external CSS, you might have to use `!important` in your external stylesheet. Alternatively, re-evaluate if `chai-wind` is the most appropriate styling solution for parts of your UI requiring complex cascading or fine-grained style control.

Warnings

gotcha chai-wind applies styles directly to `element.style`, which has the highest CSS specificity. This means traditional CSS stylesheets will be overridden by `chai-wind` unless `!important` is used in external CSS, which is generally discouraged.
Fix: Be aware of CSS specificity. For critical overrides, use `!important` in your external stylesheet or consider if `chai-wind` is the right tool for scenarios requiring complex cascading.
gotcha As a client-side JavaScript utility that manipulates the DOM, chai-wind does not support Server-Side Rendering (SSR). Initial server-rendered content will appear unstyled until the JavaScript executes in the browser.
Fix: If SSR is required, chai-wind is not a suitable solution. Consider server-compatible CSS-in-JS libraries or traditional CSS approaches.
gotcha For pages with a very large number of elements utilizing `chai-` classes, querying and manipulating the DOM for each element during `DOMContentLoaded` might introduce a measurable performance overhead, causing a brief flash of unstyled content.
Fix: Profile performance on large pages. If FOUC (Flash of Unstyled Content) or initial load performance is an issue, consider traditional CSS or a more optimized styling solution.
breaking The library is designed for ES Modules. Attempting to use CommonJS `require()` syntax will result in runtime errors as the package does not provide a CommonJS entry point.
Fix: Always use `import` syntax: `import { applyChaiStyles } from 'chai-wind';`. Ensure your environment supports ES Modules (e.g., `<script type="module">` in browsers or Node.js with module support).

Install

npm install chai-winder npm
yarn add chai-winder yarn
pnpm add chai-winder pnpm

Imports

applyChaiStyles
wrong:
```
const { applyChaiStyles } = require('chai-wind')
```
correct:
```
import { applyChaiStyles } from 'chai-wind'
```
chai-wind is an ES Module. Use `import` syntax in a script tag with `type="module"` or in an ES Module-compatible bundler setup.

Quickstart

This quickstart demonstrates how to include chai-wind directly in an HTML file using an ESM import and apply basic utility styles to elements.

<!DOCTYPE html>
<html>
<head>
  <title>Chai-Wind Quickstart</title>
  <style>
    body { font-family: sans-serif; margin: 2rem; }
  </style>
</head>
<body>
  <div class="chai-bg-22c55e chai-text-white chai-p-24 chai-rounded-8 chai-fw-700 chai-f-20">
    Hello, chai-wind 🍵
  </div>
  <p class="chai-text-orange chai-f-16 chai-dp-flex chai-mt-16">
    This paragraph has some inline styles applied via chai-wind classes.
  </p>

  <script type="module">
  import { applyChaiStyles } from "https://esm.sh/chai-winder@1.0.9";
  // For local development, you'd use: import { applyChaiStyles } from './node_modules/chai-wind/index.js';
  
  // Call applyChaiStyles to convert `chai-` prefixed classes to inline styles.
  // This function automatically waits for the DOMContentLoaded event.
  applyChaiStyles();
</script>

</body>
</html>

view raw JSON →