ApniChaiCSS

☕ ApniChaiCSS

Syntax Properties Install

GitHub v1.0.4

Syntax

Every class follows the same pattern:

chai - property - value

chai-p-20

padding: 20px

chai-bg-red

background-color: red

chai-text-center

text-align: center

chai-rotate-45

transform: rotate(45deg)

Properties

All supported shorthands and their CSS output.

Class	CSS Output
`chai-p-{n}`	padding: npx
`chai-pt-{n}`	padding-top: npx
`chai-pb-{n}`	padding-bottom: npx
`chai-pl-{n}`	padding-left: npx
`chai-pr-{n}`	padding-right: npx
`chai-m-{n}`	margin: npx
`chai-mt-{n}`	margin-top: npx
`chai-mb-{n}`	margin-bottom: npx
`chai-ml-{n}`	margin-left: npx
`chai-mr-{n}`	margin-right: npx
`chai-gap-{n}`	gap: npx

Class	CSS Output
`chai-w-{n}`	width: npx
`chai-h-{n}`	height: npx
`chai-minw-{n}`	min-width: npx
`chai-minh-{n}`	min-height: npx
`chai-maxw-{n}`	max-width: npx
`chai-maxh-{n}`	max-height: npx

Class	CSS Output
`chai-fs-{n}`	font-size: npx
`chai-fw-{val}`	font-weight: val
`chai-lh-{val}`	line-height: val
`chai-ls-{n}`	letter-spacing: npx
`chai-text-center`	text-align: center
`chai-text-left`	text-align: left
`chai-text-right`	text-align: right
`chai-text-{color}`	color: color

Class	CSS Output
`chai-d-{val}`	display: val
`chai-jc-{val}`	justify-content: val
`chai-ai-{val}`	align-items: val
`chai-ac-{val}`	align-content: val
`chai-fd-{val}`	flex-direction: val
`chai-fwf-{val}`	flex-wrap: val

Class	CSS Output
`chai-bg-{color}`	background-color: color
`chai-br-{n}`	border-radius: npx
`chai-bd-{n}`	border: npx solid black
`chai-bc-{val}`	border-color: val
`chai-op-{val}`	opacity: val
`chai-shadow-{val}`	box-shadow: val
`chai-overflow-{val}`	overflow: val
`chai-cursor-{val}`	cursor: val

Class	CSS Output
`chai-scale-{val}`	transform: scale(val)
`chai-rotate-{n}`	transform: rotate(ndeg)

Class	CSS Output
`chai-pos-{val}`	position: val
`chai-z-{n}`	z-index: n
`chai-top-{n}`	top: npx
`chai-left-{n}`	left: npx
`chai-right-{n}`	right: npx
`chai-bottom-{n}`	bottom: npx

Installation

Pick whichever way fits your project.

📦 npm

                        # install
                        npm install apnichaicss

                        # use in your JS
                        import { applyChaiStyles }
                        from "apnichaicss";
                        applyChaiStyles();
                    

npmjs.com/package/apnichaicss →

🌐 CDN

                        <!-- paste in <head> -->
                        <script type="module"
                        src="https://unpkg.com/
                            apnichaicss/index.js"
                        ></script>

                        <!-- then just use classes -->
                        <div class="chai-p-20
                            chai-bg-red">
                        Hello ☕
                        </div>
                    

Note: npm requires a bundler (Vite, webpack, etc.). CDN auto-runs in the browser — no extra function call needed.

Examples

This page is styled using chai-* classes. Here are a few patterns:


chai-bg-#111
chai-text-white
chai-p-10 chai-pl-22
chai-br-6 chai-fw-600

ApniChaiCSS

Zero-dep styling engine.


chai-bg-white chai-p-16
chai-br-8 chai-fs-14
chai-fw-700 chai-mb-6

Design Code Ship


chai-d-flex chai-gap-8
chai-bg-#111
chai-p-5 chai-pl-12
chai-br-20 chai-fs-13

☕ ApniChaiCSS

npm package · GitHub

Built by Devansh Yaduvanshi · MIT · v1.0.4

Style with chai-* classes

Syntax

Properties

Installation

Examples