ChaiTailwind

A Lightweight Utility-First CSS Engine Built with JavaScript

Write CSS using intuitive class names like chai-p-2, chai-bg-red, and more!

Spacing Utilities

Control padding and margin with simple class names:

Padding (p)

chai-p-10

Content with 10px padding

Margin (m)

chai-m-10

Content with 10px margin

Horizontal Padding

chai-px-15

15px left & right

Vertical Margin

chai-my-8

8px top & bottom

Top Padding

chai-pt-15

15px top padding

Bottom Margin

chai-mb-12

12px bottom margin

Color Utilities

Background Colors

chai-bg-red

chai-bg-blue

chai-bg-green

chai-bg-yellow

chai-bg-purple

chai-bg-pink

Text Colors

chai-text-red

chai-text-blue

chai-text-green

chai-text-purple

chai-text-orange

chai-text-dark

Typography Utilities

Font Sizes

chai-text-xs: Extra Small Text

chai-text-sm: Small Text

chai-text-base: Base Text Size

chai-text-lg: Large Text Size

chai-text-xl: Extra Large Text

chai-text-2xl: 2XL Text Size

chai-text-3xl: 3XL Text Size

chai-text-4xl: 4XL Text Size

Font Weights

Light (300)

chai-font-light

Normal (400)

chai-font-normal

Semibold (600)

chai-font-semibold

Bold (700)

chai-font-bold

Text Alignment

chai-text-left: Left aligned text

chai-text-center: Center aligned text

chai-text-right: Right aligned text

Layout Utilities

Flexbox

Flex container with centered items:

Item 1

Item 2

Item 3

Flex with space-between:

Left

Center

Right

Display Types

chai-block

chai-inline-block

chai-inline

Additional Utilities

Borders & Radius

chai-rounded

chai-rounded-lg

chai-rounded-xl

chai-rounded-full

Shadows

chai-shadow

chai-shadow-md

chai-shadow-lg

Sizing

chai-w-100 x chai-h-100

Other Utilities

chai-cursor-pointer (hover)

chai-truncate: This text is very long and will be truncated with an ellipsis if it overflows the container...

How to Use

1. Include the Script

2. Add Classes to Your HTML

<div class="chai-p-20 chai-bg-blue chai-rounded-lg chai-text-white chai-text-center">
  <h1 class="chai-text-3xl chai-font-bold">Hello ChaiTailwind!</h1>
  <p class="chai-text-lg">Beautiful styling with simple class names</p>
</div>

3. Advanced Usage (JavaScript)

// Create instance with debug mode
const chai = new ChaiTailwind({ debug: true });

// Add custom utilities
chai.addUtility('custom-shadow', () => ({
  boxShadow: '0 0 20px rgba(0,0,0,0.3)'
}));

// Rescan if DOM changes
chai.rescan();

Pattern Guide

Pattern	Example	Result
Spacing with value	`chai-p-10`	padding: 10px
Color utilities	`chai-bg-red`, `chai-text-blue`	Background and text colors
Typography	`chai-text-2xl`, `chai-font-bold`	Font size and weight
Layout	`chai-flex`, `chai-justify-center`	Flexbox utilities
Without value	`chai-flex`, `chai-hidden`	Boolean/toggle utilities

Key Features

⚡ Lightweight

No dependencies, small file size, fast loading

🎨 Easy to Use

Intuitive class naming similar to Tailwind CSS

🔧 Customizable

Add your own custom utilities easily

📱 Responsive Ready

Works with any responsive design pattern