Introducing Chai Tailwind

Write classes. Watch styles brew.

Write chai-* classes. The engine scans the DOM, parses each token, applies inline styles, and re-renders responsive states as the viewport changes.

64 Utilities used on this page
0 Build tools required
JS Own parser logic

chai-engine.js

<div class="chai-bg-red chai-text-white chai-text-center chai-p-2">
  Hello ChaiCSS
</div>
chai-p-2 -> padding: 2px

bg-red background-color: red

text-center text-align: center

p-2 padding: 2px

01

Traverse DOM

`querySelectorAll` finds every node that contains a `chai-` class after the page is ready.

02

Parse tokens

Spacing, colors, typography, borders, layout, effects, hover, and breakpoints are handled by separate parser functions.

03

Apply styles

The final declarations are applied with `setProperty`, then updated again for hover and breakpoint state.

Live interface demo

A real screen styled through chai utilities.

Generated preview

Responsive layout

`chai-md-grid-cols-2`

The same class parser supports breakpoint prefixes and reapplies inline styles when the viewport changes.

Hover state

`chai-hover-bg-cyan`

Hover utilities are handled with JavaScript event listeners, not prewritten utility CSS.

Supported utility groups

Spacingchai-p-24, chai-mx-auto

Colorschai-bg-red, chai-text-white

Typographychai-text-xl, chai-font-bold

Borderschai-border, chai-rounded-xl

Layoutchai-grid, chai-gap-18

Stateschai-hover-bg-cyan