KahwaCSS Documentation

KahwaCSS is a runtime utility engine. It reads kw-* classes directly from your HTML, parses tokens in JavaScript, and applies inline styles without a build step.

Runtime Parser Mutation Aware Single Prefix: kw- Arbitrary Values Supported

Installation

Via CDN

<script src="https://cdn.jsdelivr.net/npm/kahwacss@1.0.4/dist/kahwacss.cdn.min.js"></script>
<script>
  KahwaCSS.init();
</script>

Via NPM

npm i kahwacss

import { initKahwaCSS } from "kahwacss";

initKahwaCSS();

How The Engine Works

Supported Utility Coverage

Default theme color tokens: red blue green pink black white orange gray yellow purple cyan brown slate zinc

Complete Utility Syntax Reference

This table lists the parser-supported syntax patterns and representative outputs.

Utility Syntax	Accepts	CSS Output	Example
`kw-block`, `kw-inline`, `kw-hidden`, `kw-flex`, `kw-grid`, `kw-table`	fixed tokens	`display: ...`	`kw-grid` -> `display: grid`
`kw-visible`, `kw-invisible`	fixed tokens	`visibility: visible\|hidden`	`kw-invisible`
`kw-flex-col`, `kw-flex-row`, `kw-flex-wrap`, `kw-flex-1`, `kw-flex-none`	fixed tokens	`flex*` styles	`kw-flex-col`
`kw-items-`, `kw-justify-`	center/start/end/between/around/evenly	`alignItems`, `justifyContent`	`kw-justify-between`
`kw-static`, `kw-relative`, `kw-absolute`, `kw-fixed`, `kw-sticky`	fixed tokens	`position: ...`	`kw-sticky`
`kw-text-left\|center\|right\|justify`	fixed tokens	`textAlign`	`kw-text-center`
`kw-text-xs\|sm\|base\|lg\|xl\|2xl\|3xl\|4xl\|5xl\|6xl`	preset size map	`fontSize`	`kw-text-3xl` -> `30px`
`kw-text-{color}`	theme token or arbitrary color	`color`	`kw-text-gray`, `kw-text-[#222]`
`kw-bg-{color}`	theme token or arbitrary color	`backgroundColor`	`kw-bg-blue`, `kw-bg-[#ffe88f]`
`kw-bold`, `kw-italic`, `kw-underline`, `kw-line-through`, `kw-no-underline`	fixed tokens	`fontWeight`, `fontStyle`, `textDecoration`	`kw-italic`
`kw-uppercase`, `kw-lowercase`, `kw-capitalize`, `kw-normal-case`	fixed tokens	`textTransform`	`kw-uppercase`
`kw-fs-{n\|[value]}`	number or arbitrary value	`fontSize`	`kw-fs-18`, `kw-fs-[1.125rem]`
`kw-lh-{n\|[value]}`	number or arbitrary value	`lineHeight`	`kw-lh-28`
`kw-fw-{n}`	numeric weight	`fontWeight`	`kw-fw-500`
`kw-font-{token\|[family]}`	weight token or arbitrary family	`fontWeight` or `fontFamily`	`kw-font-semibold`, `kw-font-[Inter]`
`kw-p-`, `kw-pt-`, `kw-pr-`, `kw-pb-`, `kw-pl-`, `kw-px-`, `kw-py-*`	number, `auto`, arbitrary	`padding*`	`kw-px-6`, `kw-p-[18px]`
`kw-m-`, `kw-mt-`, `kw-mr-`, `kw-mb-`, `kw-ml-`, `kw-mx-`, `kw-my-*`	number, `auto`, arbitrary	`margin*`	`kw-mx-auto`, `kw-m-[10px]`
`kw-w-{token}`	`auto/full/screen/fit/min/max`, fraction, number, arbitrary	`width`	`kw-w-full`, `kw-w-1/3`, `kw-w-[340px]`
`kw-h-{token}`	`auto/full/screen/fit/min/max`, fraction, number, arbitrary	`height`	`kw-h-screen`, `kw-h-[420px]`
`kw-min-w-`, `kw-max-w-`, `kw-min-h-`, `kw-max-h-`	number, `full`, arbitrary	`min/max width/height`	`kw-max-w-640`, `kw-min-h-[40vh]`
`kw-grow-{n}`, `kw-shrink-{n}`	number	`flexGrow`, `flexShrink`	`kw-grow-1`
`kw-basis-{token}`	`auto/full`, fraction, number, arbitrary	`flexBasis`	`kw-basis-1/2`, `kw-basis-[280px]`
`kw-border`, `kw-border-0`	fixed tokens	`border`, `borderWidth`	`kw-border`
`kw-border-{n\|[value]}`	number or arbitrary width	`borderWidth` (+ solid when numeric)	`kw-border-2`
`kw-border-t-`, `kw-border-b-`, `kw-border-l-`, `kw-border-r-`	number or arbitrary width	side border width (+ side style when numeric)	`kw-border-b-1`
`kw-border-color-{color}`	theme token or arbitrary color	`borderColor`	`kw-border-color-black`
`kw-rounded`, `kw-rounded-none\|sm\|md\|lg\|xl\|2xl\|full`	fixed tokens	`borderRadius`	`kw-rounded-xl`
`kw-rounded-{n\|[value]}`	number or arbitrary	`borderRadius`	`kw-rounded-18`, `kw-rounded-[22px]`
`kw-grid-cols-{n\|none}`	number or `none`	`gridTemplateColumns`	`kw-grid-cols-3`
`kw-grid-rows-{n\|none}`	number or `none`	`gridTemplateRows`	`kw-grid-rows-2`
`kw-gap-{n\|[value]}`, `kw-gap-x-`, `kw-gap-y-`	number or arbitrary	`gap`, `columnGap`, `rowGap`	`kw-gap-4`, `kw-gap-x-[18px]`
`kw-overflow-hidden\|auto\|scroll\|visible`	fixed tokens	`overflow`	`kw-overflow-auto`
`kw-overflow-x-`, `kw-overflow-y-`	any overflow keyword	`overflowX`, `overflowY`	`kw-overflow-y-scroll`
`kw-opacity-{n}`	number 0-100	`opacity: n / 100`	`kw-opacity-80` -> `0.8`
`kw-transition`, `kw-transition-colors`, `kw-transition-opacity`, `kw-transition-transform`	fixed tokens	`transition*`	`kw-transition`
`kw-duration-{n\|[value]}`	number (ms) or arbitrary	`transitionDuration`	`kw-duration-300`, `kw-duration-[1.2s]`
`kw-top-`, `kw-right-`, `kw-bottom-`, `kw-left-`	`auto/full`, number, arbitrary	inset positional props	`kw-top-2`, `kw-left-[12px]`
`kw-z-{n}`	number	`zIndex`	`kw-z-50`
`kw-aspect-auto\|square\|video`	fixed tokens	`aspectRatio`	`kw-aspect-video`
`kw-aspect-{w/h}`, `kw-aspect-[value]`	fraction, arbitrary, raw token	`aspectRatio`	`kw-aspect-4/3`, `kw-aspect-[3/2]`
`kw-object-contain\|cover\|fill\|none\|scale-down`, `kw-object-{value}`	fixed tokens or custom token	`objectFit`	`kw-object-cover`
`kw-pointer-none\|auto`, `kw-pointer-{value}`	fixed tokens or custom token	`pointerEvents`	`kw-pointer-none`
`kw-cursor-pointer\|not-allowed\|move\|default\|text`	fixed tokens	`cursor`	`kw-cursor-pointer`
`kw-list-none\|disc\|decimal`	fixed tokens	`listStyleType`	`kw-list-disc`
`kw-whitespace-normal\|nowrap\|pre\|pre-wrap`	fixed tokens	`whiteSpace`	`kw-whitespace-nowrap`
`kw-shadow-none\|shadow\|shadow-sm\|shadow-md\|shadow-lg\|shadow-xl`	fixed tokens	`boxShadow`	`kw-shadow-md`