</>
initKahwaCSS()
Ship Fast

Build beautiful interfaces faster with modern, reusable kw utility components

Runtime Style Orchestrator

Get Started
kw-p-4 | kw-bg-blue | kw-text-center | kw-grid-cols-3 | kw-rounded-2xl | kw-shadow-md | kw-w-1/2 | kw-border-color-red

Engine Features

  • Runtime utility parsing from plain HTML classes
  • Zero build step styling with instant inline application
  • MutationObserver sync for new nodes and class updates
  • RequestAnimationFrame batching for efficient re-apply
  • Strict kw- prefix enforcement for clean scope
  • Static + dynamic utility parser architecture
  • Arbitrary value support like kw-w-[320px]
  • Fraction syntax support like kw-w-1/2
  • Theme color tokens + arbitrary color values
  • Config merge support with safe defaults
  • Applied-class caching via data-kahwa-classes
  • Broad utility groups: spacing, layout, typography, grid, flex, borders, effects, transitions

How It Works

  1. 1. Boot + DOM Ready Handshake

    initKahwaCSS() waits for DOM readiness, then starts the first scan and observer.

  2. 2. Config Resolution + Prefix Lock

    User config is merged with defaults; the engine intentionally supports only kw- utilities.

  3. 3. DOM Scan by Utility Selector

    scanDOM() finds matching nodes using [class*="kw-"] and runs style application on each.

  4. 4. Safe Apply + Class Cache

    applyStyles() skips unsafe tags (script/style/noscript) and stores applied tokens in data-kahwa-classes to avoid redundant work.

  5. 5. Token Parsing + Value Resolution

    Tokens are parsed by static maps and regex rules, including spacing scale, fractions, color tokens, and arbitrary bracket values.

  6. 6. Live Mutation Sync

    A MutationObserver watches new nodes and class changes, batches updates with requestAnimationFrame, and reapplies styles.

Playground

Type your kw- classes or click class chips to style the live component.

Editor

Write full HTML here (tags + text + classes). Chips apply to the root element.

Root element classes

Preview