🚀 ChaiStrap

ChaiStrap is a lightweight utility-first CSS engine (inspired by Tailwind) that applies styles dynamically using custom class names — no CSS files required.

✨ Features

• ⚡ Zero CSS setup
• 🎯 Utility-first class system
• 🔥 Works with plain HTML, React, and any JS framework
• 🧠 Runtime style engine (no build step required)
• 🌐 CDN + npm support

📦 Installation

Using npm

npm install chaistrap

🚀 Usage

1️⃣ React / JavaScript

import { chaistrap } from "chaistrap";

chaistrap(); 

👉 In React:

import { useEffect } from "react";
import { chaistrap } from "chaistrap";

function App() {
  useEffect(() => {
    chaistrap();
  }, []);

  return <div className="chai-bg-red chai-p-4">Hello 🚀</div>;
}

export default App;

2️⃣ CDN (HTML)

<script src="https://cdn.jsdelivr.net/npm/chaistrap/dist/chaistrap.umd.js"></script>

<script>
  chaistrap.chaistrap();
</script>

🎨 Example

<div class="chai-bg-blue chai-text-white chai-p-4 chai-m-2">
  Hello from ChaiStrap 🚀
</div>

🧠 How It Works

ChaiStrap scans the DOM, finds classes starting with chai-, and dynamically applies styles using JavaScript.

Class → Parse → Convert → Apply inline styles

📚 Available Utilities

🎨 Background Colors

chai-bg-red
chai-bg-blue
chai-bg-green
chai-bg-black
chai-bg-white

🎯 Text Colors

chai-text-white
chai-text-black
chai-text-gray
chai-text-green

📏 Spacing

chai-p-1 → padding: 8px
chai-m-2 → margin: 16px
chai-pt-4 → padding-top: 32px

📐 Layout

chai-flex
chai-flex-col
chai-justify-center
chai-items-center

📦 Width / Height

chai-w-full
chai-h-full
chai-w-10 → width: 40px

💡 Example Component

<div class="chai-bg-darkgray chai-p-6 chai-w-60 chai-m-4">
  <h2 class="chai-text-white chai-mb-2">Pro Plan</h2>
  <p class="chai-text-lightgray chai-mb-4">Perfect for developers</p>
  <button class="chai-bg-green chai-text-black chai-p-3 chai-w-full">
    Get Started
  </button>
</div>

⚠️ Important Notes

Call chaistrap.chaistrap() after DOM is loaded,

Works by applying inline styles

Dynamic DOM updates require re-running chaistrap()

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit PRs.

📄 License

MIT License

👨‍💻 Author

Rohit Chornele

⭐ Support

If you like this project, give it a ⭐ on GitHub!