talwinder-ji-ki-css
v1.0.4
Published
A mini Tailwind-like utility-first CSS engine,It is just a shallow copy of Tailwind css
Maintainers
mehularoraReadme
👳♂️ TalwinderCSS
"A mini Tailwind-like utility-first CSS engine."
TalwinderCSS is a shallow copy of Tailwind CSS, built with a custom naming convention inspired by ChaiAurCode. It maps specific prefixes to the configuration found in manajerJi.js.
Features:-
Installation
npm install talwinder-ji-ki-cssUsage
add a script after your body tag in .html file
<script type="module">
import { runTalwinder } from "./node_modules/talwinder-ji-ki-css/dist/talwinder.js"
runTalwinder()
</script>initEngine() registers the built-in components and applies Talwinder utility classes in one call.
Example HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "bg-laal-500 likhawat-16xl chaiPad-p-10 chaiMargin-my-16 text-dhusar-500 border-5 border-solid border-neela-500 border-none chai-flex flex-col ">
<p>Hello Developers</p>
<p>jWhat's Up</p>
<p>Try Out TalwinderCSS</p>
</div>
</body>
<script type="module">
import { runTalwinder } from "./node_modules/talwinder-ji-ki-css/dist/talwinder.js"
runTalwinder()
</script>
</html>📏 Spacing (Padding & Margin)
All spacing utilities use the spacing object scale from manajerJi.js. Following your logic, use the chai prefix to apply these.
Padding
| Talwinder Class | CSS Property | Value (px) | Value (rem) |
| :--- | :--- | :--- | :--- |
| chaiPad-p-0 | padding | 0px | 0rem |
| chaiPad-p-1 | padding | 4px | 0.25rem |
| chaiPad-p-4 | padding | 16px | 1rem |
| chaiPad-p-12 | padding | 48px | 3rem |
Margin
| Talwinder Class | CSS Property | Value (px) | Value (rem) |
| :--- | :--- | :--- | :--- |
| chaiMargin-m-0 | margin | 0px | 0rem |
| chaiMargin-m-px | margin | 1px | - |
| chaiMargin-m-2 | margin | 8px | 0.5rem |
| chaiMargin-m-10 | margin | 40px | 2.5rem |
| chaiMargin-m-96 | margin | 384px | 24rem |
🎨 Colors (Desi Palette)
A great Combination Of Coding + Fun
| Key | Color Name | Shades Available | | :--- | :--- | :--- | | laal | Red | 50, 100, 200, ..., 900 | | neela | Blue | 50, 100, 200, ..., 900 | | hara | Green | 50, 100, 200, ..., 900 | | peela | Yellow | 50, 100, 200, ..., 900 | | dhusar | Gray | 50, 100, 200, ..., 900 | | firozi | Cyan | 50, 100, 200, ..., 900 | | jamuni | Purple | 50, 100, 200, ..., 900 | | narangi | Orange | 50, 100, 200, ..., 900 | | bengani | Violet | 50, 100, 200, ..., 900 | | gulabi | Pink | 50, 100, 200, ..., 900 |
🖼️ Border Colors
Make your components pop with our localized color borders. Combine the property with the color and weight.
| Talwinder Class | CSS Result |
| :--- | :--- |
| border-laal-500 | border-color: #ef4444 |
| border-neela-600 | border-color: #2563eb |
| border-hara-400 | border-color: #4ade80 |
| border-peela-500 | border-color: #eab308 |
| border-gulabi-300 | border-color: #f9a8d4 |
| border-dhusar-900 | border-color: #111827 |
🖼️ Border Styles
Make your components Look Good with our localized Custom Border Styles/size
| Talwinder Class | CSS Result |
| :--- | :--- |
| border-solid/border-4 | border-style: solid/border:16px; |
| border-dotted/border-4 | border-style: solid/dotted:16px; |
| border-dashed/border-4 | border-style: dashed/border:16px; |
| border-none/border-4 | border-style: none/border:16px; |
📦 Display Utilities
Directly mapped from your display object.
| Class | Resulting CSS |
| :--- | :--- |
| block | display: block |
| flex | display: flex |
| grid | display: grid |
| hidden | display: none |
| inline-block | display: inline-block |
🤸 Flexbox Layout
Mapped from your flex object in managerJi.js.
| Class | Resulting CSS |
| :--- | :--- |
| flex-row | flex-direction: row |
| flex-col | flex-direction: column |
| justify-center | justify-content: center |
| justify-between | justify-content: space-between |
🛠 Project Details
- Author: Mehul Arora
- Main Entry:
src/logic.js - Config:
src/manajerJi.js - License: MIT