chai-talwindar ☕

A fun project which is a collection of CSS utility classes, inspired by Tailwind, with fun class names.

🚀 Features

• Utility-first CSS (like Tailwind)
• No build step required
• Runs directly in the browser
• Auto-applies styles on DOM load
• Supports dynamic DOM updates (optional)

📦 Installation

npm install chai-talwindar

⚡ Usage

Import the package

import "chai-talwindar";

Add chai as a class

Add a class chai in the element you want to style.

Use the supported classes

After including the chai class now you can use any supported class for styling.

Example

<div class="chai p-thodi bg-light text-center">
  Hello Chai CSS ☕
</div>

🧠 How It Works

• Looks for elements with .chai
• Reads their class list
• Matches classes with predefined styles
• Applies styles using JavaScript

🎨 Supported Classes

📦 Padding

p-ekdum-thodi
p-thodi-thodi
p-thodi
p-thik
p-zyada
p-thodi-zyada
p-thodi-aur-zyada
p-bohot-zyada
p-bohot-hi-zyada

📏 Margin

m-ekdum-thodi
m-thodi-thodi
m-thodi
m-thik
m-zyada
m-thodi-zyada
m-thodi-aur-zyada
m-bohot-zyada
m-bohot-hi-zyada

🎨 Background Colors

bg-ekdum-light
bg-thoda-light
bg-light
bg-thik-light
bg-neutral
bg-thoda-dark
bg-thik-dark
bg-thoda-zyada-dark
bg-bohot-zyada-dark
bg-bohot-hi-zyada-dark

🎨 Text Colors

color-ekdum-light
color-thoda-light
color-light
color-thik-light
color-neutral
color-thoda-dark
color-thik-dark
color-thoda-zyada-dark
color-bohot-zyada-dark

🔤 Font Size

font-ekdum-chhote
font-thode-chhote
font-chhote
font-thik
font-bade
font-thode-bade
font-thode-zyada-bade
font-bohot-zyada-bade
font-bohot-zyada-hi-bade

🖌️ Font Color

font-ekdum-light
font-thoda-light
font-light
font-thik-light
font-neutral
font-thoda-dark
font-thik-dark
font-thoda-zyada-dark
font-bohot-zyada-dark

📐 Text Align

text-center

🧱 Borders

border-1-ekdum-light
border-1-thoda-light
border-1-light
border-1-thik-light
border-1-neutral
border-1-thoda-dark
border-1-thik-dark
border-1-thoda-zyada-dark
border-1-bohot-zyada-dark

border-2-ekdum-light
border-2-thoda-light
border-2-light
border-2-thik-light
border-2-neutral
border-2-thoda-dark
border-2-thik-dark
border-2-thoda-zyada-dark
border-2-bohot-zyada-dark

🔘 Border Radius

r-ekdum-thodi
r-thodi-thodi
r-thodi
r-thik
r-zyada
r-thodi-zyada
r-thodi-aur-zyada
r-bohot-zyada
r-bohot-hi-zyada

📄 License

MIT