C Pour-Chaiwind
Chai utility styling

Brew utility CSS with a chai-colored workflow.

Pour-Chaiwind lets you write utility classes like chai-p-20, chai-bg-blue-500, and chai-flex in HTML, JSX, or simple browser pages. Use it as a runtime script, or import { pour } in JavaScript and JSX projects.

Open Playground Read Setup Guide
Static Layout, typography, effects, borders, display, and more
Dynamic Padding, sizing, gaps, grid tracks, opacity, timing, and positioning
Palette Shades, semantic tokens, and chai-friendly utility color classes

Install and start pouring

Choose the setup that matches how you want to ship your UI.

1

Install from npm

npm install pour-chaiwind

Best for JavaScript apps, JSX projects, and bundler-based setups.

2

Use the CDN script

<script src="https://cdn.jsdelivr.net/npm/pour-chaiwind@latest/dist/chaiwind.min.js"></script>

Best for quick browser demos, sandboxes, and static HTML pages.

3

Import in JavaScript or JSX

import { pour } from "pour-chaiwind";

pour();

If your project already runs JavaScript, this is the smallest setup path.

CDN usage

Use Pour-Chaiwind in a plain HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pour-Chaiwind Demo</title>
  </head>
  <body>
    <div class="chai-bg-blue-500 chai-text-white chai-p-20 chai-rounded-xl">
      CDN test
    </div>

    <script src="https://cdn.jsdelivr.net/npm/pour-chaiwind@latest/dist/chaiwind.min.js"></script>
  </body>
</html>

JSX usage

Use it in React or JSX without extra ceremony

import { pour } from "pour-chaiwind";

pour();

export default function App() {
  return (
    <main className="chai-p-24 chai-bg-slate-100 chai-min-h-screen">
      <section className="chai-bg-white chai-rounded-3xl chai-shadow-lg chai-p-24 chai-max-w-420 chai-mx-auto">
        <h1 className="chai-text-3xl chai-font-bold chai-text-slate-800">
          React + Pour-Chaiwind
        </h1>
        <p className="chai-text-slate-600 chai-leading-relaxed chai-mt-12">
          Utility classes are resolved at runtime.
        </p>
      </section>
    </main>
  );
}

What it gives you

The package ships with both static utilities and value-based dynamic utilities.

A

Static utility groups

  • backgrounds
  • typography
  • borders
  • display and positioning
  • overflow and interaction
  • effects and transitions
B

Dynamic utility groups

  • chai-p-*, chai-m-*, chai-gap-*
  • chai-w-*, chai-h-*, min/max sizing
  • chai-top-*, chai-inset-*
  • chai-grid-cols-*, chai-col-span-*
  • chai-opacity-*, chai-duration-*
C

Palette utilities

  • chai-bg-blue-500
  • chai-text-slate-700
  • chai-border-emerald-300
  • chai-bg-semantic-primary
  • chai-bg-semantic-danger

Copy-paste examples

These are good starter blocks for users who want to test quickly.

Card

<section class="chai-bg-white chai-rounded-3xl chai-shadow-lg chai-p-24">
  <h2 class="chai-text-3xl chai-font-bold chai-text-slate-800">
    Chai card
  </h2>
  <p class="chai-text-slate-600 chai-leading-relaxed chai-mt-12">
    A simple card using utility classes.
  </p>
</section>

Flex row

<div class="chai-flex chai-items-center chai-justify-between chai-gap-16 chai-p-16 chai-bg-slate-100 chai-rounded-xl">
  <span class="chai-font-semibold">Pour-Chaiwind</span>
  <button class="chai-bg-orange chai-text-white chai-px-16 chai-py-10 chai-rounded-full">
    Brew
  </button>
</div>

Why developers like it

Simple mental model

  • write classes in HTML or JSX
  • load the package once
  • get styles without separate utility CSS files
  • mix color, spacing, sizing, and layout in one place

Next step

Try the live playground

Open the playground to paste markup, preview live output, and test the current utility surface without editing your app code.

Launch Playground