bab-chai-css
v1.0.6
Published
baitan chai css plugin
Maintainers
babitakryReadme
☕ Bab Chai CSS
A lightweight utility-first CSS engine built using JavaScript.
Instead of writing traditional CSS, you can use simple class names like:
chai-p-20, chai-bg-blue, chai-text-white
Your script scans the DOM and dynamically converts these classes into inline styles.
Live Demo
👉 https://bab-chai-css-npm-package.vercel.app/
NPM Package
👉 https://www.npmjs.com/package/bab-chai-css
GitHub Repository
👉 https://github.com/your-username/bab-chai-css
Features
- Utility-first CSS approach
- No external CSS required
- Dynamic DOM parsing
- Supports spacing, colors, typography, and layout
- Custom class parser (
chai-*) - Lightweight and beginner-friendly
How It Works
- The script runs after page load
- It scans all DOM elements
- Finds classes starting with
chai- - Parses the class name
- Applies corresponding inline styles
Example
chai-p-20 → padding: 20pxchai-bg-blue → background-color: bluechai-text-white → color: white
Installation
npm install bab-chai-cssUsage
1. Import in your project
import MyTailwind from "bab-chai-css";
MyTailwind();2. Use utility classes in HTML
<div class="chai-p-20 chai-bg-blue chai-text-white">
Hello World !!
</div>Example
<body class="chai-flex chai-justify-center chai-items-center chai-bg-dark">
<div class="chai-p-20 chai-rounded-10 chai-bg-card chai-w-320">
<h1 class="chai-text-white chai-center">☕ Bab Chai CSS</h1>
</div>
</body>