☕ Chai Peeni Hai

A fun, desi-style utility-first CSS engine inspired by Tailwind
but explained like your friend: "bhai bas class laga aur ho gaya"

🚀 What is this?

Chai Peeni Hai is a lightweight JavaScript-powered utility CSS engine that:

• Parses class names like pichwada-laal-krdo
• Converts them into real CSS
• Injects styles dynamically into the DOM

😄 Example

<div class="pichwada-laal-krdo text-safed-krdo p-8-krdo thoda-gol-krdo center-krdo">
  Namaste duniya 🚀
</div>

👉 Automatically becomes:

.pichwada-laal-krdo {
  background-color: red;
}
.text-safed-krdo {
  color: white;
}
.p-8-krdo {
  padding: 2rem;
}
.thoda-gol-krdo {
  border-radius: 8px;
}
.center-krdo {
  display: flex;
  justify-content: center;
  align-items: center;
}

📦 Installation

npm install chai-peeni-hai

⚙️ Usage

1. Import and initialize

import { initChaiCSS } from "./node_modules/chai-peeni-hai/index.js";

initChaiCSS();

2. Add classes in HTML

<div class="pichwada-neela-krdo text-bada-krdo p-4-krdo">
  Hello Chai CSS ☕
</div>

🧠 Supported Utilities

🎨 Background

• pichwada-laal-krdo
• pichwada-neela-krdo

✍️ Text

• text-safed-krdo
• text-bada-krdo
• text-chota-krdo

📦 Spacing

• p-4-krdo
• p-8-krdo
• m-4-krdo

🔲 Border Radius

gol-thoda-krdo thoda-gol-krdo

🧱 Border

• border-laal-krdo

📦 Layout

• flex-krdo
• block-krdo
• hidden-krdo

🔥 Flex Helpers

• center-krdo

🌫️ Opacity

• fade-halka-krdo
• fade-gayab-krdo

⚡ How it works

DOM → scan classes → parse → generate CSS → inject into <style>

🧩 Features

• ✅ Utility-first approach
• ✅ Dynamic class parsing
• ✅ No build step required
• ✅ Runs directly in browser
• ✅ Custom “desi” syntax 😄

🛠️ Development

git clone https://github.com/King-sama312/chai-tailwind-css.git
cd chai-tailwind-css
npm install

🔗 Local Testing

npm link

Then in another project:

npm link chai-peeni-hai

🎯 Why this project?

This was built as part of a learning cohort to:

• Understand how Tailwind works internally
• Practice DOM manipulation and parsing
• Build something fun and unique

😄 Philosophy

CSS should be simple. If it takes more than one chai to understand… it’s too complex.

🧑‍💻 Author

kingsama

📜 License

MIT

🧪 Upcoming Features

• px / py spacing
• hover support
• dynamic values (p-[20px]-krdo)