Tailwind, but runtime.
AtomicChai
A lightweight runtime CSS engine that applies utility classes directly in the browser. No build tools. No setup. Just drop a script and start styling.
This page is entirely styled with Atomic Chai.
GitHub
NPM
YouTube
Usage
Start using Atomic Chai instantly. No build step, no config. Just write classes and go.
Install via npm
Use it in React, Vite, or any modern JavaScript setup.
npm install atomic-chai
import initAtomicChai from "atomic-chai";
Include via CDN
Perfect for static HTML. Just include the script and start styling.
<script
src="https://unpkg.com/atomic-chai"></script>
Features
AtomicChai is designed to be simple, powerful, and fully runtime.
Resets browser default styles
AtomicChai includes a minimal reset so you start with a consistent base across browsers.
Huge collection of static & dynamic utility classes
Generate styles on the fly with dynamic values and a built-in color system inspired by modern utility frameworks.
Reactive via MutationObserver
Automatically detects DOM changes and applies styles instantly using MutationObserver.
Works with Vanilla JS & React
Use it in plain HTML or modern frameworks like React without any extra configuration.
Extendable via AtomicChai.addClass() API
Add your own custom utilities at runtime using the AtomicChai.addClass() API.
Optimized with caching for performance
Uses caching to avoid re-processing already parsed classes, ensuring fast and efficient style generation.
Utilities
Complete reference of Atomic Chai utilities (static + dynamic).
Spacing
Sizing
Colors
Typography
Border
Cursor
Display
Flex & Grid
Gap
Position
Misc
text-overflow: ellipsis;
white-space: nowrap
Extending AtomicChai
Create your own utility classes and extend Atomic Chai to fit your needs.
Add custom classes
Define your own class by providing a name and a style object.
AtomicChai.addClass("chai-my-class", { color: "red" });
Usage
Once added, you can use your custom class anywhere in your HTML.
<div class="chai-my-class"></div>