chai-css-aryan

v1.0.4

Published

9 days ago

Mini utility-first CSS engine like Tailwind

0High
0Medium
0Low

aryan-nandanwar

css utility-css tailwind-like

☕ Chai CSS

A mini utility-first CSS engine inspired by Tailwind CSS — built from scratch using JavaScript.

It scans your HTML, detects utility classes, and dynamically generates CSS at runtime.

🚀 Features

⚡ Utility-first CSS approach
🧠 Runtime CSS generation
🎯 Simple and beginner-friendly
📦 Lightweight (no build step required)
🔥 Inspired by Tailwind CSS

📦 Installation

npm install chai-css-aryan

🧑‍💻 Usage

✅ Method 1: Using ES Modules

<script type="module">
  import chaiCSS from "chai-css-aryan";
  chaiCSS();
</script>

✅ Method 2: Local Development

<script type="module">
  import chaiCSS from "../../chai-css/index.js";
  chaiCSS();
</script>

🧾 Example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Chai CSS Example</title>
  </head>
  <body>
    <h1
      class="chai-p-4 chai-text-xl chai-bg-green-500 chai-text-white chai-br-lg"
    >
      Hello Aryan 🚀
    </h1>

    <p
      class="chai-p-3 chai-text-base chai-bg-yellow-100 chai-text-gray-700 chai-mt-4"
    >
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>

    <div class="chai-card">
      <h2 class="chai-text-lg chai-font-bold chai-text-gray-800">Card Title</h2>
      <p class="chai-text-sm chai-text-gray-500 chai-mt-2">
        This is a built-in card component.
      </p>
    </div>

    <script type="module">
      import chaiCSS from "chai-css-aryan";
      chaiCSS();
    </script>
  </body>
</html>

⚙️ Available Utilities

Spacing

| Class | Description | Example Output | | ------------- | ------------------- | ----------------------- | | chai-p-{n} | Padding (all sides) | padding: 16px; | | chai-pt-{n} | Padding top | padding-top: 16px; | | chai-pr-{n} | Padding right | padding-right: 16px; | | chai-pb-{n} | Padding bottom | padding-bottom: 16px; | | chai-pl-{n} | Padding left | padding-left: 16px; | | chai-m-{n} | Margin (all sides) | margin: 16px; | | chai-mt-{n} | Margin top | margin-top: 16px; | | chai-mr-{n} | Margin right | margin-right: 16px; | | chai-mb-{n} | Margin bottom | margin-bottom: 16px; | | chai-ml-{n} | Margin left | margin-left: 16px; |

Spacing scale: 0 · 1=4px · 2=8px · 3=12px · 4=16px · 5=20px — or pass any raw number (e.g. chai-p-24 → 24px).

Typography

| Class | Description | Example Output | | -------------------- | ----------------- | -------------------------------- | | chai-text-{size} | Font size | font-size: 16px; | | chai-font-{weight} | Font weight | font-weight: 700; | | chai-align-left | Text align left | text-align: left; | | chai-align-center | Text align center | text-align: center; | | chai-align-right | Text align right | text-align: right; | | chai-align-justify | Text justify | text-align: justify; | | chai-italic | Italic text | font-style: italic; | | chai-not-italic | Normal style | font-style: normal; | | chai-ul | Underline | text-decoration: underline; | | chai-line-through | Strikethrough | text-decoration: line-through; | | chai-noul | Remove underline | text-decoration: none; | | chai-uppercase | Uppercase text | text-transform: uppercase; | | chai-lowercase | Lowercase text | text-transform: lowercase; |

Font sizes: xs=12px · sm=14px · base=16px · lg=18px · xl=20px

Font weights: thin · extralight · light · normal · medium · semibold · bold · extrabold · black

Colors

All color utilities follow the pattern chai-{property}-{color}-{shade}.

| Class | Description | Example Output | | ----------------------------- | ---------------- | ----------------------------------- | | chai-bg-{color}-{shade} | Background color | background-color: #3b82f6; | | chai-text-{color}-{shade} | Text color | color: #3b82f6; | | chai-border-{color}-{shade} | Border color | border-color: #3b82f6; | | chai-bg-white | White background | background-color: #ffffff; | | chai-bg-black | Black background | background-color: #000000; | | chai-text-white | White text | color: #ffffff; | | chai-text-black | Black text | color: #000000; | | chai-border-white | White border | border-color: #ffffff; | | chai-border-black | Black border | border-color: #000000; | | chai-bg-{value} | Raw background | background: linear-gradient(...); | | chai-opacity-{n} | Opacity (0–100) | opacity: 0.5; |

Available colors: slate · gray · zinc · red · orange · amber · yellow · lime · green · teal · cyan · sky · blue · indigo · violet · purple · fuchsia · pink · rose

Shades: 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800

Border

| Class | Description | Example Output | | -------------------- | ------------------ | ----------------------- | | chai-b-{n} | Border (all sides) | border: 2px solid; | | chai-border-solid | Solid border | border-style: solid; | | chai-border-dashed | Dashed border | border-style: dashed; | | chai-border-dotted | Dotted border | border-style: dotted; | | chai-border-double | Double border | border-style: double; | | chai-border-none | No border | border-style: none; | | chai-br-{size} | Border radius | border-radius: 8px; |

Radius sizes: none · sm · DEFAULT · md · lg · xl · 2xl · 3xl · full

⚠️ Note: Border radius uses chai-br-{size}, not chai-rounded-{size}.

🃏 Card (Built-in Component)

Chai CSS ships with a ready-to-use card component — no configuration needed. Just add the class and get a styled white card with padding, rounded corners, and a shadow.

| Class | Description | | -------------- | ----------------------------------------- | | chai-card | Default card (24px padding, 12px radius) | | chai-card-sm | Compact card (16px padding, 8px radius) | | chai-card-lg | Spacious card (40px padding, 16px radius) |

<!-- Default card -->
<div class="chai-card">
  <h2>Card Title</h2>
  <p>Some content goes here.</p>
</div>

<!-- Small card -->
<div class="chai-card-sm">
  <p>Compact card content.</p>
</div>

<!-- Large card -->
<div class="chai-card-lg">
  <p>Spacious card content.</p>
</div>

Each variant generates a white background, box shadow, and border radius automatically — no extra classes needed.

Display & Cursor

| Class | Description | | ------------------------- | ----------------------- | | chai-block | display: block | | chai-inline-block | display: inline-block | | chai-inline | display: inline | | chai-hidden | display: none | | chai-cursor-pointer | Pointer cursor | | chai-cursor-default | Default cursor | | chai-cursor-not-allowed | Not-allowed cursor | | chai-cursor-wait | Wait cursor | | chai-cursor-text | Text cursor | | chai-cursor-move | Move cursor | | chai-cursor-auto | Auto cursor |

🧠 How It Works

Scans all elements in the DOM
Extracts class names starting with chai-
Matches them against utility functions (exact match first, then key+value split)
Generates CSS dynamically
Injects styles into a <style id="chai-css"> tag

⚠️ Limitations

Runs at runtime (browser), not build-time
May impact performance on very large DOM trees
No responsive breakpoints or pseudo-class support yet

🔮 Future Improvements

🚀 CLI tool (npx chai-css build)
📁 Config file support
⚡ Build-time optimization (like Tailwind)
🎨 Theme system
📱 Responsive breakpoints (sm:, md:, lg:)
🖱️ Hover & focus variants

🤝 Contributing

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

👨‍💻 Author

Aryan Nandanwar

💻 B.Tech CSE Student
🚀 Building in public
🔥 Passionate about web development & AI

⭐ Support

If you like this project:

👉 Give it a star on GitHub 👉 Share it on LinkedIn 👉 Build something awesome with it