v1.0 - Now Available on npm

Build. Style.
Elevate.

A modern, lightweight utility-first CSS runtime. Write chai-* classes in your markup and let JavaScript convert them to inline styles with zero build step, zero config.

Get Started Documentation

Modern CSS Responsive Accessible ~6KB gzip

// ChaiCoreCSS: zero config
import "chaicorecss/auto";

// Use in your HTML
<div class="chai-flex
  chai-gap-16 chai-p-24">
  <button class="
    chai-bg-orange
    chai-rounded-xl">
    Get Started
  </button>
</div>

Features

Why ChaiCoreCSS?

Everything you need to style modern web apps without the overhead of traditional CSS frameworks.

Zero Build Step

No Webpack, no PostCSS, no CLI. Just import and go. ChaiCoreCSS runs entirely in the browser at runtime.

Lightweight (~6KB)

Tiny footprint, massive power. The entire runtime is under 6KB gzipped with zero dependencies.

Utility-First

Write expressive chai-* classes directly in HTML. Spacing, colors, typography, layout, all covered.

MutationObserver

Automatically detects and styles dynamically added DOM elements. Perfect for SPAs and reactive frameworks.

Themeable

Extend the default theme with custom colors, radii, fonts, and more. Full design-system control.

Modular API

Use auto-mode for zero-config, or manually control scanning with startChaiCoreCSS, brew, and parse.

Installation

Up and running in seconds

Three steps to start using ChaiCoreCSS in any project.

Install the package

Add ChaiCoreCSS to your project via npm with zero dependencies and a tiny footprint.

$ npm install chaicorecss

Import & auto-start

One line import. ChaiCoreCSS scans your DOM and applies styles on page load.

import "chaicorecss/auto";

Write chai-* classes

Use intuitive utility classes in your HTML markup. That's literally it!

<div class="chai-flex chai-p-24">

Utilities

Explore the utility system

Comprehensive utility groups covering every styling need. Numeric values become pixels automatically.

Padding & Margin

chai-p-24    → padding: 24px
chai-px-16   → padding-left/right: 16px
chai-mt-12   → margin-top: 12px
chai-gap-10  → gap: 10px
chai-mx-auto → margin-left/right: auto

Background & Text Colors

chai-bg-orange     → background: #f97316
chai-bg-blue-dark  → background: #1e3a8a
chai-text-white    → color: #ffffff
chai-text-green    → color: #22c55e
chai-border-red    → border-color: #ef4444

Font & Text

chai-text-center → text-align: center
chai-text-18     → font-size: 18px
chai-font-bold   → font-weight: 700
chai-font-mono   → font-family: monospace
chai-leading-relaxed → line-height: 1.625
chai-uppercase   → text-transform: uppercase

Flexbox & Grid

chai-flex          → display: flex
chai-flex-col      → flex-direction: column
chai-grid          → display: grid
chai-grid-cols-3   → grid-template-columns: repeat(3, 1fr)
chai-items-center  → align-items: center
chai-justify-between → justify-content: space-between

Borders & Radius

chai-border      → border: 1px solid
chai-border-2    → border-width: 2px
chai-rounded-xl  → border-radius: 12px
chai-rounded-full → border-radius: 9999px
chai-border-orange → border-color: #f97316

Shadows & Opacity

chai-shadow-lg   → box-shadow: 0 20px 44px ...
chai-shadow-xl   → box-shadow: 0 26px 64px ...
chai-opacity-80  → opacity: 0.8
chai-cursor-pointer → cursor: pointer
chai-transition  → transition-property: all

Playground

Try it live

Write HTML with chai-* classes and see them rendered instantly. Hit Run or Ctrl+Enter.

Editor

Preview

API Reference

Complete API

Everything exposed by the chaicorecss package: clean, composable, and well-documented.

parseChaiClass(className, options?)

Parse a single chai-* class and return support status, category, generated styles, and an ignore reason when unsupported.

import { parseChaiClass } from "chaicorecss";
const result = parseChaiClass("chai-p-24");
// { supported: true, category: "spacing", styles: { padding: "24px" } }

applyChaiStyles(root?, options?)

Scans once, applies inline styles, removes supported chai-* classes, stores originals in data-chai-classes.

import { applyChaiStyles } from "chaicorecss";
const report = applyChaiStyles(document);
console.log(report.applied.length, "classes applied");

startChaiCoreCSS(root?, options?)

Runs the first scan and starts a MutationObserver for dynamic DOM updates. Returns a controller.

import { startChaiCoreCSS } from "chaicorecss";
const ctrl = startChaiCoreCSS(document);
ctrl.refresh(); // Re-scan
ctrl.disconnect(); // Stop

brew(root?, options?)

Friendly alias for applyChaiStyles. Perfect for re-scanning after dynamic content updates.

import { brew } from "chaicorecss";
brew(document.querySelector("#app"));

createChaiCoreCSS(options?)

Creates a tiny configured instance with parse, apply, and start helpers bound to your custom options.

import { createChaiCoreCSS } from "chaicorecss";
const chai = createChaiCoreCSS({ theme: { colors: { brand: "#0f766e" } } });
chai.start(document);

import "chaicorecss/auto"

Zero-config auto mode. Just import and ChaiCoreCSS automatically scans and observes your entire document.

// That's it: one line!
import "chaicorecss/auto";

Theming

Extend the design system

Add custom colors, radii, fonts, and more. Use them instantly as chai-* classes.

import { startChaiCoreCSS } from "chaicorecss";

startChaiCoreCSS(document, {
  theme: {
    colors: {
      brand: "#0f766e",
      accent: "#7c3aed",
      surface: "#1e1b4b",
    },
    radii: {
      pill: "9999px",
    },
  },
});

// Now use in HTML:
// chai-bg-brand, chai-text-accent,
// chai-rounded-pill

Default Color Palette

orange - #f97316

blue - #3b82f6

green - #22c55e

purple - #a855f7

red - #ef4444

pink - #ec4899

black - #111827

white - #ffffff

Build. Style. Elevate.