Getting Started

ChaiTailwind is a lightweight utility-first CSS engine built in JavaScript. It allows you to write semantic, reusable class names prefixed with chai- that get converted into inline styles dynamically. This eliminates the need for writing large CSS files and allows instant customization.

To begin, import the ChaiTailwind library and your configuration object, then initialize it. The configuration allows you to define spacing, colors, typography, borders, shadows, and custom utilities to fit your design system.

import ChaiTailwind from "./chaiTailwind.js";
import config from "./style-config.js";

const chai = new ChaiTailwind(config);
chai.init();

Once initialized, the engine will traverse the DOM and apply the corresponding inline styles for any classes starting with chai-.

Spacing (Padding & Margin)

Spacing is one of the most common utilities in ChaiTailwind. Use p for padding, px/py for horizontal/vertical padding, and m for margin. You can combine them with numeric scales defined in your config.

Tip: Combine multiple spacing utilities to achieve complex layouts without writing custom CSS.

Colors

ChaiTailwind supports background, text, and border colors with shades from 50 to 900. Use the pattern chai-bg-{color}-{shade} or chai-text-{color}-{shade}. Colors can be easily customized in your config file to match your brand palette.

Best Practice: Use semantic color naming in your config (like primary, secondary) for maintainability.

Typography

ChaiTailwind provides utilities for font size, weight, and alignment. Use chai-textsize-{size}, chai-fontweight-{weight}, and chai-textalign-{alignment} to control typography directly in your HTML.

Layouts & Flexbox

ChaiTailwind makes layout creation effortless. Apply chai-flex, chai-flexcol, chai-justifycenter, or chai-itemscenter to quickly achieve flexible and responsive layouts.

Borders & Radius

Add borders and rounded corners using chai-border-{color} and chai-rounded-{size}. You can also use chai-roundedfull for completely circular elements.

Shadows

Elevate your UI with shadow utilities: chai-shadow-sm, chai-shadow-md, and chai-shadow-lg. Shadows are great for cards, buttons, and modals to provide visual hierarchy.

Hover Effects

Add interactivity with hover utilities. For example, hover:chai-text-white changes text color on hover. Combine with links, buttons, or icons for better UX.

Cursor Styles

Make elements interactive by changing the cursor: chai-cursorpointer will show a pointer on hover.

Containers

The chai-container utility helps center your content and constrain the width for responsive layouts. Ideal for sections like hero, features, or cards.

Custom Utilities

ChaiTailwind allows you to define custom utilities in your configuration file. This lets you extend the framework with your own semantic class names for reusable styles.