{"id":15567,"library":"chai-winder","title":"Chai-Wind","description":"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.","status":"active","version":"1.0.9","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","css","utility","runtime","styling"],"install":[{"cmd":"npm install chai-winder","lang":"bash","label":"npm"},{"cmd":"yarn add chai-winder","lang":"bash","label":"yarn"},{"cmd":"pnpm add chai-winder","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"chai-wind is an ES Module. Use `import` syntax in a script tag with `type=\"module\"` or in an ES Module-compatible bundler setup.","wrong":"const { applyChaiStyles } = require('chai-wind')","symbol":"applyChaiStyles","correct":"import { applyChaiStyles } from 'chai-wind'"}],"quickstart":{"code":"\n\n\n Chai-Wind Quickstart\n \n\n\n
\n Hello, chai-wind 🍵\n
\n

\n This paragraph has some inline styles applied via chai-wind classes.\n

\n\n \n\n\n","lang":"html","description":"This quickstart demonstrates how to include chai-wind directly in an HTML file using an ESM import and apply basic utility styles to elements."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If SSR is required, chai-wind is not a suitable solution. Consider server-compatible CSS-in-JS libraries or traditional CSS approaches.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use `import` syntax: `import { applyChaiStyles } from 'chai-wind';`. Ensure your environment supports ES Modules (e.g., `