Documentation

A complete guide to configuring and using chai-tailwind. Learn how to drop the script in and style your app without a build step.

Install & Usage

Install the package via npm:

npm install @pallabdev/chai-tailwind

Import and call tailwind() after your HTML is available in the page so class names can be scanned.

import { tailwind } from "@pallabdev/chai-tailwind";

document.addEventListener("DOMContentLoaded", () => {
    tailwind();
});

Supported Classes

Class Value Rules

Arbitrary values use brackets: w-[420px], text-[40px], bg-[#111111].
Numeric scale values use n * 0.25rem (example: p-4 => 1rem).
Size tokens: xs, sm, md, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl.

Color Tokens

red, blue, green, yellow, purple, pink, gray, slate, zinc, neutral, stone, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, fuchsia, rose, black, white

Text Utilities

Class pattern	Example	Result
`text-<sizeToken>`	`text-2xl`	`font-size` from size map
`text-[<value>]`	`text-[40px]`	`font-size: 40px`
`text-[#<hex>]`	`text-[#ff0000]`	`color: #ff0000`
`text-<color>-<shade>`	`text-blue-500`	computed `color` shade
`font-bold`	`font-bold`	`font-weight: 700`
`underline`	`underline`	`text-decoration: underline`

Layout & Sizing Utilities

Width and Height

Class pattern	Example	Result
`w-<keyword>`	`w-full`	`100%`, `100vw`, `fit-content`
`w-<number>`	`w-64`	`number * 0.25rem`
`w-[<value>]`	`w-[320px]`	raw width

Flexbox & Grid

Class	Result
`flex` / `grid`	`display: flex` / `display: grid`
`flex-col`	`flex-direction: column`
`grid-cols-<n>`	`grid-template-columns: repeat(n, 1fr)`
`justify-<val>`	`start`, `center`, `between`, etc.

Padding, Margin & Radius

Prefixes available: p-, px-, py-, pt-, pb-, pl-, pr- (same for m- margins).
Radius uses rounded-<val> or rounded-[<val>].

Built with Chai Tailwind