Installation

Two ways to add KataCSS to your project. One script tag or one import.

CDN

Drop this in your code. That's the entire setup.

npm

npm install kata-css

import "kata-css";  // self-executes on DOMContentLoaded

Usage

Write kata-* classes on any element. They become inline styles on load.

<h1 class="kata-text-3xl kata-font-bold kata-text-blue-500">
  Hello, KataCSS
</h1>

<div class="kata-flex kata-gap-4 kata-p-6 kata-bg-kata-chai-matcha kata-rounded-lg">
  <p class="kata-text-white kata-font-medium">Works on load</p>
</div>

How it works

KataCSS is a runtime engine. No compiler, no build step, no CSSOM manipulation.

Execution flow

KataCSS listens for DOMContentLoaded. Once the DOM is ready, it scans every element with a class attribute, finds anything starting with kata-, looks it up in a key-value map, writes the CSS as an inline style attribute, and removes the original class.

Browser parses HTML
  → script registers DOMContentLoaded listener
  → DOM finishes loading
  → KataCSS scans all [class] elements
  → finds kata-* classes 
  → looks up classMap
  → writes inline style attribute
  → removes kata-* class from classList

Extending

// src/classMap.js — add any key you want
classMap["kata-bg-brand"]   = "background-color: #FF6B35;";
classMap["kata-text-brand"] = "color: #FF6B35;";
    

Spacing

All spacing utilities use i × 0.25rem. Scale runs 0-96.

Padding

Margin

Gap

Layout & Display

Display, box-sizing, and overflow utilities.

Flexbox

Direction, wrapping, justification, and alignment.

Direction & wrap

Justify & align

Position & Z-index

Position type, inset values (0–96 scale), and z-index (0–96).

Width & Height

Numeric scale 0–96 (×0.25rem) plus named values.

Width

Height

Typography

Font family, size (with line-height), weight, style, alignment, leading, and tracking.

Font family

Font size

Weight, style & other

Text Decoration

Underline, overline, line-through, and decoration style.

Borders

Border width, style, color, and radius.

Width & style

Radius

Colors

Every key works as kata-text-*, kata-bg-*, kata-border-*. Click any card to copy.

Standard palette

Background helpers

Cursor & Visibility

Cursor style and element visibility.

Cursor

Visibility

Chai Theming

Colors matched to real chai and tea varieties from across the world. A ChaiCode cohort original.

<div class="kata-bg-kata-chai-masala kata-p-6 kata-rounded-lg">
  <h2 class="kata-text-kata-chai-foam kata-text-xl kata-font-bold">Masala</h2>
</div>
<span class="kata-bg-kata-chai-matcha kata-text-white kata-px-4 kata-py-1 kata-rounded-full">
  Matcha
</span>