🍵 ChaiCSS v2.0

400+ Utility-First CSS Framework in Vanilla JavaScript

📚 On This Page

Quick Start Guide
What's New in v2.0
Statistics
All Utilities

Welcome to ChaiCSS!

ChaiCSS is a lightweight, utility-first CSS framework written in vanilla JavaScript. Instead of traditional CSS files, you write class names and the engine converts them to inline styles automatically.

400+

Utilities

25

Why ChaiCSS?

🚀 Zero Configuration: Just include the script and start using chai-* classes
⚡ Lightweight: Only 12 KB unminified vs 50+ KB for Tailwind
🎯 Utility-First: Write styles directly in your HTML
♻️ Extensible: Add custom utilities with addUtility()
👀 SPA-Ready: Built-in DOM watcher for dynamic elements
📚 Well-Documented: Clear examples and complete reference

Perfect For

Learning CSS fundamentals
Building landing pages
Creating admin dashboards
Prototyping ideas quickly
Small to medium projects
Educational purposes

💡 Getting Started

New to ChaiCSS? Start with the Quick Start Guide to get up and running in seconds!

⚡ Quick Start

Get Started in 30 Seconds

Step 1: Include the Script

<script src="chai-css-engine-v2.js"></script>

Step 2: Use chai-* Classes

<div class="chai-p-4 chai-bg-blue chai-text-white chai-rounded-lg">
  Hello, ChaiCSS!
</div>

Step 3: Done! ✓

The engine automatically processes your classes on page load. No CSS files, no build tools, no configuration!

Common Examples

Button

<button class="chai-px-6 chai-py-3 chai-bg-blue chai-text-white chai-rounded-md chai-font-semibold chai-shadow-lg chai-cursor-pointer chai-transition chai-duration-300 chai-hover-scale-105">
  Click Me
</button>

Card

<div class="chai-p-6 chai-bg-white chai-rounded-lg chai-shadow-lg chai-border chai-border-gray">
  <h2 class="chai-text-2xl chai-font-bold chai-mb-4">Card Title</h2>
  <p class="chai-text-gray chai-leading-relaxed">Card description</p>
  <button class="chai-mt-4 chai-px-4 chai-py-2 chai-bg-blue chai-text-white chai-rounded">Action</button>
</div>

Flexbox Layout

<div class="chai-flex chai-flex-row chai-gap-4 chai-justify-between">
  <div class="chai-flex-1 chai-p-4 chai-bg-red">Box 1</div>
  <div class="chai-flex-1 chai-p-4 chai-bg-green">Box 2</div>
  <div class="chai-flex-1 chai-p-4 chai-bg-blue">Box 3</div>
</div>

Grid Layout (NEW!)

<div class="chai-grid chai-grid-cols-3 chai-gap-6">
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow">Card 1</div>
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow">Card 2</div>
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow chai-col-span-3">Wide Card</div>
</div>

Animated Element (NEW!)

<div class="chai-transition chai-duration-300 chai-ease-out chai-scale-110 chai-rotate-45">
  Animated element
</div>

Most Useful New Utilities (v2.0)

Grid System

chai-grid chai-grid-cols-{1-12} chai-col-span-{1-12}

Transitions

chai-transition chai-duration-{ms} chai-ease-{type}

Transforms

chai-scale-{value} chai-rotate-{deg} chai-translate-{x/y}-{px}

Filters

chai-blur-{size} chai-brightness-{%} chai-contrast-{%}

📥 Installation

Option 1: Direct Script Tag (Recommended)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <!-- Your HTML here -->
  <div class="chai-p-4 chai-bg-blue chai-text-white">Hello</div>

  <!-- Include ChaiCSS at the end of body -->
  <script src="chai-css-engine-v2.js"></script>
</body>
</html>

Option 2: Module Import

import ChaiCSSEngine from './chai-css-engine-v2.js';

No Build Tools Required!

ChaiCSS works with zero configuration. Just include the script and start using chai-* classes.

Verification

Open your browser console (F12) and you should see:

🍵 ChaiCSS Engine initialized with 400+ utilities

File Locations

File	Purpose	Size
`chai-css-engine-v2.js`	Core library (use this!)	12 KB
`chai-css-engine.js`	v1.0 version (still works)	8 KB
`chai-css-demo-v2.html`	Interactive demo	N/A

✨ What's New in v2.0

Expanded from 150 to 400+ utilities with 8 new categories

Quick Stats

Utilities

150 → 400+

+167% growth

File Size

8 KB → 12 KB

+4 KB only

Colors

10 → 40+

+light/dark variants

8 New Categories Added

NEW Grid Layout System (13 utilities)

chai-grid - Create grid container
chai-grid-cols-{1-12} - Define columns
chai-col-span-{1-12} - Span items across columns
chai-gap-{value} - Space between items

NEW Transitions & Animations (25+ utilities)

chai-transition - Enable smooth transitions
chai-duration-{75,100,150,200,300,500,700,1000} - Animation speed
chai-ease-{linear,in,out,in-out} - Timing functions
chai-scale-{50,75,100,110,125,150} - Scale transforms

NEW Filters & Visual Effects (23 utilities)

chai-blur-{sm,md,lg,xl} - Blur effects
chai-brightness-{50,100,150} - Brightness control
chai-contrast-{50,100,150} - Contrast adjustment
chai-grayscale, chai-sepia, chai-invert - Special effects

NEW Backdrop Filters (8 utilities)

chai-backdrop-blur-{sm,md,lg} - Glass-morphism effect
chai-backdrop-brightness-{value} - Background dimming
chai-backdrop-grayscale, chai-backdrop-invert - Background effects

NEW Text Decoration & Transform (11 utilities)

chai-text-uppercase, chai-text-lowercase, chai-text-capitalize
chai-underline, chai-line-through, chai-italic
Text styling variants

NEW Letter Spacing (6 utilities)

chai-tracking-{tighter,tight,normal,wide,wider,widest} - Letter spacing control

NEW White Space & Word Breaking (9 utilities)

chai-truncate - Ellipsis on overflow
chai-whitespace-{normal,nowrap,pre} - Whitespace handling
chai-break-{words,all} - Word breaking

NEW Background Patterns (7 utilities)

chai-bg-fixed, chai-bg-scroll - Background behavior
chai-bg-clip-{border,padding,content,text} - Clipping modes

EXPANDED Major Expansions

Category	v1.0	v2.0	Growth
Colors - Background	10	40+	+300%
Colors - Text	9	40+	+344%
Colors - Border	4	30+	+650%
Flexbox	8	30+	+275%
Typography	8	50+	+525%
Borders	7	17	+143%
Positioning	8	20+	+150%

Migration from v1.0

✅ Fully backward compatible! All v1.0 code works with v2.0 without changes.

Simply replace the script reference:

<!-- OLD -->
<script src="chai-css-engine.js"></script>

<!-- NEW (same usage, more power!) -->
<script src="chai-css-engine-v2.js"></script>

📏 Spacing Utilities

Padding

Add space inside elements.

Utility	Effect	Example
`chai-p-{value}`	Padding all sides (px)	`chai-p-4`
`chai-px-{value}`	Padding left & right (px)	`chai-px-8`
`chai-py-{value}`	Padding top & bottom (px)	`chai-py-4`
`chai-pt-{value}`	Padding top only	`chai-pt-2`
`chai-pb-{value}`	Padding bottom only	`chai-pb-2`
`chai-pl-{value}`	Padding left only	`chai-pl-4`
`chai-pr-{value}`	Padding right only	`chai-pr-4`

Margin

Add space outside elements.

Utility	Effect	Example
`chai-m-{value}`	Margin all sides (px)	`chai-m-2`
`chai-mx-{value}`	Margin left & right (px)	`chai-mx-auto`
`chai-my-{value}`	Margin top & bottom (px)	`chai-my-4`
`chai-mt-{value}`	Margin top only	`chai-mt-4`
`chai-mb-{value}`	Margin bottom only	`chai-mb-2`
`chai-ml-{value}`	Margin left only	`chai-ml-4`
`chai-mr-{value}`	Margin right only	`chai-mr-4`

Examples

Basic Spacing

<div class="chai-p-4 chai-m-2">Padded and margined</div>

Directional Spacing

<div class="chai-px-8 chai-py-4">Horizontal 8px, vertical 4px</div>

Center with Margin

<div class="chai-mx-auto chai-w-400">Centered div</div>

🎨 Colors (40+ Options)

EXPANDED Now includes light and dark variants!

Background Colors

Red

Orange

Yellow

Green

Cyan

Blue

Purple

Pink

Color Variants (NEW!)

Utility	Color	Hex
`chai-bg-red`	Red	#EF4444
`chai-bg-red-light`	Light Red	#FCA5A5
`chai-bg-red-dark`	Dark Red	#991B1B
`chai-bg-blue`	Blue	#3B82F6
`chai-bg-blue-light`	Light Blue	#BFDBFE
`chai-bg-blue-dark`	Dark Blue	#1E40AF

Text Colors

Use chai-text-{color} for text colors. All background colors work with text too!

<p class="chai-text-blue">Blue text</p>
<p class="chai-text-red-light">Light red text</p>
<p class="chai-text-purple-dark">Dark purple text</p>

Border Colors

Use chai-border-{color} for border colors.

<div class="chai-border chai-border-blue">Blue border</div>
<div class="chai-border-4 chai-border-green">Green thick border</div>

Available Colors

Slate, Gray, Zinc, Neutral, Stone (neutrals)
Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Purple, Fuchsia, Pink, Rose
White, Black, Transparent
Each color has light and dark variants

✏️ Typography (50+ Utilities)

EXPANDED From 8 to 50+ options

Font Sizes (XS to 8XL)

Utility	Size	Example
`chai-text-xs`	12px	Extra small
`chai-text-sm`	14px	Small
`chai-text-base`	16px	Base (default)
`chai-text-lg`	18px	Large
`chai-text-2xl`	24px	2XL
`chai-text-4xl`	36px	4XL
`chai-text-8xl`	96px	8XL

Font Weights

Utility	Weight
`chai-font-thin`	100 - Thin
`chai-font-light`	300 - Light
`chai-font-normal`	400 - Normal
`chai-font-semibold`	600 - Semibold
`chai-font-bold`	700 - Bold
`chai-font-black`	900 - Black

Text Alignment

Utility	Effect
`chai-text-left`	Align text to left
`chai-text-center`	Center text
`chai-text-right`	Align text to right
`chai-text-justify`	Justify text

Line Height & Spacing (NEW!)

Utility	Effect
`chai-leading-tight`	Tight line spacing (1.25)
`chai-leading-normal`	Normal line spacing (1.5)
`chai-leading-relaxed`	Relaxed line spacing (1.625)
`chai-leading-loose`	Loose line spacing (2)
`chai-tracking-tight`	Tight letter spacing
`chai-tracking-normal`	Normal letter spacing
`chai-tracking-wide`	Wide letter spacing
`chai-tracking-widest`	Widest letter spacing

Text Transform & Decoration (NEW!)

Utility	Effect
`chai-text-uppercase`	CONVERT TEXT TO UPPERCASE
`chai-text-lowercase`	convert text to lowercase
`chai-text-capitalize`	Capitalize First Letter
`chai-italic`	Italicized text
`chai-underline`	Underlined text
`chai-line-through`	Strikethrough text

🔥 Layout (Flexbox & Grid)

Flexbox (30+ Utilities) EXPANDED

Create Flex Container

Utility	Effect
`chai-flex`	display: flex
`chai-flex-row`	Flex row (horizontal)
`chai-flex-col`	Flex column (vertical)
`chai-flex-wrap`	Wrap items to next line

Justify Content (Horizontal Alignment)

Utility	Effect
`chai-justify-start`	Align to start (flex-start)
`chai-justify-center`	Center items
`chai-justify-end`	Align to end (flex-end)
`chai-justify-between`	Space between items
`chai-justify-around`	Space around items

Align Items (Vertical Alignment)

Utility	Effect
`chai-items-start`	Align to top
`chai-items-center`	Center vertically
`chai-items-end`	Align to bottom
`chai-items-stretch`	Stretch to fill

Gap (Spacing)

chai-gap-{value} - Adds space between flex items

<div class="chai-flex chai-gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid System (13 Utilities) NEW

Create Grid Container

Utility	Effect
`chai-grid`	display: grid
`chai-grid-cols-{1-12}`	Define number of columns
`chai-gap-{value}`	Space between grid items

Grid Item Spanning

Utility	Effect
`chai-col-span-{1-12}`	Span columns
`chai-row-span-{value}`	Span rows

Examples

Centered Flexbox

<div class="chai-flex chai-justify-center chai-items-center chai-gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

3-Column Grid

<div class="chai-grid chai-grid-cols-3 chai-gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Responsive Grid (with Flex)

<div class="chai-flex chai-flex-wrap chai-gap-4">
  <div class="chai-flex-1">Flexible item</div>
  <div class="chai-flex-1">Flexible item</div>
</div>

🖼️ Borders & Effects

Border Width

Utility	Effect
`chai-border`	1px border all sides
`chai-border-2`	2px border
`chai-border-4`	4px border

Border Sides

Utility	Effect
`chai-border-t`	Top border only
`chai-border-b`	Bottom border only
`chai-border-l`	Left border only
`chai-border-r`	Right border only

Border Radius (Rounded Corners)

Utility	Radius
`chai-rounded`	4px
`chai-rounded-md`	8px
`chai-rounded-lg`	12px
`chai-rounded-xl`	16px
`chai-rounded-full`	9999px (circle)

Box Shadows

Utility	Effect
`chai-shadow-sm`	Small shadow
`chai-shadow-md`	Medium shadow
`chai-shadow-lg`	Large shadow
`chai-shadow-xl`	Extra large shadow

Opacity

Utility	Opacity
`chai-opacity-0`	0% (invisible)
`chai-opacity-25`	25%
`chai-opacity-50`	50%
`chai-opacity-75`	75%
`chai-opacity-100`	100% (fully visible)

✨ Effects & Interactions

Display

Utility	Effect
`chai-block`	display: block
`chai-inline`	display: inline
`chai-inline-block`	display: inline-block
`chai-flex`	display: flex
`chai-grid`	display: grid
`chai-hidden`	display: none (hidden)

Cursor & Interaction

Utility	Effect
`chai-cursor-pointer`	Pointer cursor (clickable)
`chai-cursor-default`	Default cursor
`chai-cursor-not-allowed`	Disabled cursor
`chai-pointer-events-none`	Not clickable
`chai-pointer-events-auto`	Clickable

Overflow

Utility	Effect
`chai-overflow-auto`	Scroll if needed
`chai-overflow-hidden`	Hide overflow
`chai-overflow-visible`	Show overflow

🎯 Transforms (NEW!) NEW

Scale

Utility	Scale
`chai-scale-50`	50%
`chai-scale-75`	75%
`chai-scale-100`	100% (normal)
`chai-scale-110`	110%
`chai-scale-125`	125%
`chai-scale-150`	150%

Rotate

Utility	Rotation
`chai-rotate-0`	0 degrees
`chai-rotate-45`	45 degrees
`chai-rotate-90`	90 degrees
`chai-rotate-180`	180 degrees
`-chai-rotate-45`	-45 degrees

Translate

Utility	Effect
`chai-translate-x-{value}`	Move along X axis
`chai-translate-y-{value}`	Move along Y axis
`chai-skew-x-{value}`	Skew on X axis
`chai-skew-y-{value}`	Skew on Y axis

Examples

<div class="chai-scale-110">Scaled 110%</div>
<div class="chai-rotate-45">Rotated 45 degrees</div>
<div class="chai-translate-x-10">Moved 10px right</div>

🎨 Filters & Effects (NEW!) NEW

Blur

Utility	Blur Amount
`chai-blur-none`	0px
`chai-blur-sm`	4px
`chai-blur-md`	8px
`chai-blur-lg`	16px
`chai-blur-xl`	24px

Brightness

Utility	Level
`chai-brightness-50`	50% (darkened)
`chai-brightness-100`	100% (normal)
`chai-brightness-150`	150% (brightened)

Contrast

Utility	Level
`chai-contrast-50`	50% (low contrast)
`chai-contrast-100`	100% (normal)
`chai-contrast-150`	150% (high contrast)

Special Effects

Utility	Effect
`chai-grayscale`	Convert to grayscale
`chai-grayscale-0`	No grayscale
`chai-invert`	Invert colors
`chai-sepia`	Apply sepia tone
`chai-saturate-{50,100,150}`	Adjust saturation

Backdrop Filters (NEW!) - Glassmorphism

Utility	Effect
`chai-backdrop-blur-sm`	4px blur background
`chai-backdrop-blur-md`	8px blur background
`chai-backdrop-blur-lg`	16px blur background
`chai-backdrop-brightness-{%}`	Adjust background brightness
`chai-backdrop-grayscale`	Grayscale background

Examples

<img class="chai-blur-md chai-brightness-110 chai-contrast-125">

<div class="chai-backdrop-blur-lg chai-bg-white chai-opacity-90">
  Frosted glass effect
</div>

📍 Positioning & Layout

Position Type

Utility	Effect
`chai-static`	Default position
`chai-relative`	Position relative to element
`chai-absolute`	Position relative to parent
`chai-fixed`	Position relative to viewport
`chai-sticky`	Sticky positioning

Position Values

Utility	Effect
`chai-top-{value}`	Distance from top (px)
`chai-bottom-{value}`	Distance from bottom (px)
`chai-left-{value}`	Distance from left (px)
`chai-right-{value}`	Distance from right (px)
`chai-inset-{value}`	All sides at once

Z-Index (Layering)

Utility	Z-Index
`chai-z-0`	0
`chai-z-10`	10
`chai-z-20`	20
`chai-z-30`	30
`chai-z-40`	40
`chai-z-50`	50

Examples

<!-- Floating Action Button -->
<button class="chai-fixed chai-bottom-6 chai-right-6 chai-z-50">
  Floating button
</button>

<!-- Sticky Header -->
<header class="chai-sticky chai-top-0 chai-z-40">
  Navigation
</header>

<!-- Absolutely Positioned -->
<div class="chai-relative">
  <div class="chai-absolute chai-top-4 chai-right-4">
    Badge
  </div>
</div>

💻 API Reference

Core Methods

process()

Process all elements with chai-* classes in the DOM.

window.chaiCSS.process();
// Returns: number of processed style declarations

addUtility(name, styleFunction)

Add custom utilities to the engine.

// Simple utility
window.chaiCSS.addUtility('my-custom', () => ({
  color: '#ff1493'
}));

// Parametric utility
window.chaiCSS.addUtility('my-shadow', (value) => ({
  boxShadow: `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`
}));

// Usage in HTML:
// <div class="chai-my-custom">Pink text</div>
// <div class="chai-my-shadow-5">Shadow 5px</div>

removeChaiClasses()

Remove all chai-* classes from elements after applying styles.

window.chaiCSS.removeChaiClasses();

watch()

Watch for new elements added to the DOM (useful for SPAs).

const observer = window.chaiCSS.watch();
// Now new elements with chai-* classes will be automatically styled

getStats()

Get statistics about available utilities.

const stats = window.chaiCSS.getStats();
console.log(stats.totalUtilities); // 400+
console.log(stats.utilities); // Array of all utility names

Usage Examples

Basic Usage

<script src="chai-css-engine-v2.js"></script>

<div class="chai-p-4 chai-bg-blue chai-text-white">
  Styled with ChaiCSS
</div>

Custom Utilities

// Add a gradient utility
window.chaiCSS.addUtility('gradient-sunset', () => ({
  background: 'linear-gradient(135deg, #ff6b6b, #feca57)',
  color: 'white'
}));

// Use it
// <div class="chai-gradient-sunset">Sunset gradient</div>

SPA Integration

// Start watching for new elements
window.chaiCSS.watch();

// Now when you add new elements dynamically:
const newDiv = document.createElement('div');
newDiv.className = 'chai-p-4 chai-bg-blue chai-rounded-lg';
document.body.appendChild(newDiv);

// It's automatically styled!

Manual Processing

// Process elements manually
const count = window.chaiCSS.process();
console.log(`Processed ${count} style declarations`);

🏗️ Real-World Examples

Modern Button

<button class="chai-px-6 chai-py-3 chai-bg-blue chai-text-white chai-rounded-lg chai-font-semibold chai-shadow-lg chai-cursor-pointer chai-transition chai-duration-300 chai-hover-scale-105 chai-hover-shadow-xl">
  Click Me
</button>

Card Component

<div class="chai-p-6 chai-bg-white chai-rounded-lg chai-shadow-lg chai-border chai-border-gray">
  <h2 class="chai-text-2xl chai-font-bold chai-text-gray-900 chai-mb-4">
    Card Title
  </h2>
  <p class="chai-text-gray chai-leading-relaxed chai-mb-6">
    Card description goes here
  </p>
  <button class="chai-px-4 chai-py-2 chai-bg-blue chai-text-white chai-rounded chai-cursor-pointer">
    Action
  </button>
</div>

Navigation Bar

<nav class="chai-flex chai-justify-between chai-items-center chai-p-4 chai-bg-white chai-shadow-md chai-sticky chai-top-0 chai-z-50">
  <div class="chai-text-2xl chai-font-bold chai-text-blue">Logo</div>
  <div class="chai-flex chai-gap-8">
    <a href="#" class="chai-text-gray chai-hover-text-blue chai-transition">Home</a>
    <a href="#" class="chai-text-gray chai-hover-text-blue chai-transition">About</a>
    <a href="#" class="chai-text-gray chai-hover-text-blue chai-transition">Contact</a>
  </div>
</nav>

3-Column Grid

<div class="chai-grid chai-grid-cols-3 chai-gap-6 chai-p-6">
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow">
    <h3 class="chai-font-bold chai-mb-2">Item 1</h3>
    <p>Description</p>
  </div>
  
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow">
    <h3 class="chai-font-bold chai-mb-2">Item 2</h3>
    <p>Description</p>
  </div>
  
  <div class="chai-p-4 chai-bg-white chai-rounded-lg chai-shadow">
    <h3 class="chai-font-bold chai-mb-2">Item 3</h3>
    <p>Description</p>
  </div>
</div>

Glassmorphism Card

<div class="chai-backdrop-blur-lg chai-bg-white chai-opacity-90 chai-p-6 chai-rounded-xl chai-shadow-lg">
  <h2 class="chai-text-2xl chai-font-bold chai-mb-4">Glass Card</h2>
  <p class="chai-text-gray chai-leading-relaxed">
    Frosted glass effect with modern design
  </p>
</div>

Image with Filters

<img 
  src="image.jpg" 
  class="chai-w-full chai-rounded-lg chai-shadow-lg chai-blur-0 chai-brightness-100 chai-contrast-100 chai-transition chai-duration-300 chai-hover-blur-sm chai-hover-brightness-110 chai-hover-contrast-125">

Animated Container

<div class="chai-p-6 chai-bg-gradient-purple chai-text-white chai-rounded-lg chai-transition chai-duration-500 chai-ease-out chai-scale-100 chai-hover-scale-105">
  Hover to animate!
</div>

❓ Frequently Asked Questions

General Questions

Q: Can I use ChaiCSS in production?

A: Yes! ChaiCSS is production-ready. It's lightweight (12 KB), has no dependencies, and works in all modern browsers.

Q: Do I need a build tool or npm?

A: No! ChaiCSS is a drop-in script. Just include it with a <script> tag and you're good to go.

Q: Does it work with React/Vue/Svelte?

A: Yes! Use the className prop in React or the class attribute in Vue/Svelte. ChaiCSS works with any framework.

Q: How is v2.0 different from v1.0?

A: v2.0 has 400+ utilities (vs 150), includes Grid system, transforms, filters, and backdrop effects. All v1.0 code still works!

Usage Questions

Q: What value should I use for padding/margin?

A: Use any number (in pixels): chai-p-2, chai-p-4, chai-p-8, chai-p-100, etc.

Q: Can I use custom colors?

A: ChaiCSS comes with 40+ colors. To add custom colors, use the addUtility() method.

Q: How do I center a container?

A: Use chai-mx-auto with a fixed width: <div class="chai-mx-auto chai-w-600">

Q: How do I hide an element?

A: Use chai-hidden for display: none or chai-opacity-0 for invisible but taking space.

Performance Questions

Q: How fast is ChaiCSS?

A: Very fast! DOM processing is <1ms per element. Inline styles apply instantly.

Q: Does it affect page load time?

A: No. The 12 KB script loads asynchronously. Processing happens after page load, so no visible impact.

Q: Can I minify it for production?

A: Yes! The minified version is ~5 KB, making it even lighter.

Compatibility Questions

Q: What browsers does ChaiCSS support?

A: All modern browsers (Chrome, Firefox, Safari, Edge). IE11 and older are not supported.

Q: Does it work on mobile?

A: Yes! ChaiCSS works on all mobile browsers (iOS Safari, Chrome Mobile, etc.).

Q: Can I use it with TypeScript?

A: Yes! The JavaScript works fine with TypeScript projects.

📊 ChaiCSS vs Other Frameworks

Feature Comparison

Feature	ChaiCSS	Tailwind CSS	Bootstrap
Utilities	400+	1000+	500+
File Size	12 KB	50+ KB	150+ KB
Setup	✓ Zero	PostCSS, Build tools	npm, Build tools
No Build Tool	✓ Yes	No	No
Customization	✓ Easy	Config file	SCSS variables
Learning Curve	✓ Easy	Medium	Medium-Hard
Production Ready	✓ Yes	✓ Yes	✓ Yes
Components	None (utilities only)	None (utilities only)	✓ Included

When to Use ChaiCSS

✓ Small to medium projects
✓ Learning CSS frameworks
✓ Projects with minimal dependencies
✓ Prototyping ideas quickly
✓ Admin dashboards
✓ Landing pages
✓ Educational projects

When to Use Tailwind CSS

✓ Large production applications
✓ Complex design systems
✓ Professional teams
✓ Advanced customization needed
✓ Extensive component library desired

When to Use Bootstrap

✓ Need pre-built components
✓ Rapid prototyping
✓ Consistent design patterns
✓ Larger teams
✓ Long-term maintenance

Size Comparison Chart

Framework	Size	Utilities	Setup Complexity
ChaiCSS	12 KB	400+	Minimal
Tailwind	50+ KB	1000+	Medium
Bootstrap	150+ KB	500+	Medium

📊 ChaiCSS v2.0 Statistics

Utility Coverage

400+

Total Utilities

25

Growth from v1.0 to v2.0

Metric	v1.0	v2.0	Growth
Total Utilities	150	400+	+167%
Categories	15	25	+67%
File Size	8 KB	12 KB	+50%
Features/KB	18.75	33.3	+78%

Utility Breakdown by Category

Category	Count	Status
Spacing (Padding/Margin)	14	Stable
Colors (Background)	40+	Expanded
Colors (Text)	40+	Expanded
Colors (Border)	30+	Expanded
Typography	50+	Expanded
Flexbox	30+	Expanded
Grid	13	New
Borders	17	Expanded
Transitions	25+	New
Transforms	25+	New
Filters	23	New
Backdrop Filters	8	New
Positioning	20+	Expanded

Performance Metrics

Metric	Value
File Size (Unminified)	12 KB
File Size (Minified)	~5 KB
Parse Time	<1ms for 100 elements
Style Application	<1ms per element
Dependencies	0
Browser Support	All modern browsers

📁 Project Files

Core Files

File	Purpose	Size	Use Case
`chai-css-engine-v2.js`	Core library - USE THIS!	12 KB	Include in your HTML
`chai-css-engine.js`	v1.0 version	8 KB	Legacy support
`chai-css-demo-v2.html`	Interactive demo	~50 KB	View examples

Documentation Files

File	Content	Read Time
`FILE_INDEX.md`	Navigation guide	5 min
`README_v2_COMPLETE.md`	Complete overview	10 min
`QUICKSTART_v2.md`	Practical guide	10 min
`WHATS_NEW_v2.md`	Changelog	15 min
`UTILITIES_REFERENCE_v2.md`	All utilities documented	Reference
`README.md`	v1.0 Documentation	Reference

Total Package Size

Component	Size
Library (chai-css-engine-v2.js)	12 KB
Demo HTML	~50 KB
Documentation (all MD files)	~150 KB
Total Package	~212 KB

Note: Only the core library (12 KB) is needed in production. Documentation and demos are for reference only.