Chai Talwinder ☕🔥

A lightweight utility-first CSS engine built with JavaScript.

Instead of writing CSS, you can use utility classes like:

chai-p-10
chai-bg-red
chai-text-center

and styles will be applied dynamically using JavaScript.

🚀 Features

• Utility-first styling (like Tailwind)
• No CSS file required
• DOM-based parsing
• Supports:
  • Spacing (margin, padding)
  • Colors (background, text)
  • Typography (alignment)
  • Layout (flex, grid)
  • Borders

📦 Installation

npm install chai-talwinder

⚡ Usage

Option 1: Auto-run (recommended)

import "chai-talwinder";

Option 2: Manual run

import { chaiTalwinder } from ".node-modules/chai-talwinder/index.js";

chaiTalwinder();

🧪 Example

<div class="chai-bg-red chai-p-10 chai-text-center">
  Hello World 🚀
</div>

🧠 How it works

1. Scans the DOM
2. Finds all chai-* classes
3. Parses them into styles
4. Applies inline styles dynamically

📁 Project Structure

src/
  apply.js   → converts class to style object
  parse.js   → loops through elements
index.js     → main entry point

🎯 Goal

This project is built to understand:

• DOM manipulation
• Class parsing
• Building reusable JS utilities

👨‍💻 Author

Kushagra Trivedi