chai-tailwind 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +75 -67
- package/dist/chai-tailwind.js +39 -1
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 🍵 Chai Tailwind
|
|
2
2
|
|
|
3
|
-
A lightweight Tailwind-like
|
|
3
|
+
A lightweight Tailwind-like runtime CSS engine built using pure JavaScript.
|
|
4
4
|
Apply utility classes directly in HTML — no build step required.
|
|
5
5
|
|
|
6
6
|
---
|
|
@@ -9,8 +9,10 @@ Apply utility classes directly in HTML — no build step required.
|
|
|
9
9
|
|
|
10
10
|
- ⚡ No build tools required
|
|
11
11
|
- 🎯 Utility-first CSS approach
|
|
12
|
+
- 🎬 Built-in animations (fade, slide, bounce, spin)
|
|
13
|
+
- 🖱️ Hover utilities (scale, tilt, color, opacity)
|
|
14
|
+
- 🧊 Interactive 3D tilt cards (mouse-based)
|
|
12
15
|
- 📦 Works via CDN and npm
|
|
13
|
-
- 🧠 Great for learning how Tailwind works internally
|
|
14
16
|
- 🔌 Zero dependencies
|
|
15
17
|
|
|
16
18
|
---
|
|
@@ -26,7 +28,7 @@ npm install chai-tailwind
|
|
|
26
28
|
### Using CDN
|
|
27
29
|
|
|
28
30
|
```html
|
|
29
|
-
<script src="https://cdn.jsdelivr.net/npm/chai-tailwind@1.
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/chai-tailwind@1.1.0/dist/chai-tailwind.js"></script>
|
|
30
32
|
```
|
|
31
33
|
|
|
32
34
|
---
|
|
@@ -39,7 +41,7 @@ npm install chai-tailwind
|
|
|
39
41
|
import "chai-tailwind";
|
|
40
42
|
```
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
Automatically initializes and applies styles.
|
|
43
45
|
|
|
44
46
|
### 🔹 Using CDN
|
|
45
47
|
|
|
@@ -47,7 +49,7 @@ import "chai-tailwind";
|
|
|
47
49
|
<!DOCTYPE html>
|
|
48
50
|
<html>
|
|
49
51
|
<head>
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/chai-tailwind@1.
|
|
52
|
+
<script src="https://cdn.jsdelivr.net/npm/chai-tailwind@1.1.0/dist/chai-tailwind.js"></script>
|
|
51
53
|
</head>
|
|
52
54
|
<body>
|
|
53
55
|
<div class="chai-bg-red chai-text-white chai-p-4">
|
|
@@ -59,21 +61,9 @@ import "chai-tailwind";
|
|
|
59
61
|
|
|
60
62
|
---
|
|
61
63
|
|
|
62
|
-
## ⚙️ API
|
|
63
|
-
|
|
64
|
-
### `window.ChaiTailwind.init()`
|
|
65
|
-
|
|
66
|
-
Re-apply styles manually (useful for dynamically added elements):
|
|
67
|
-
|
|
68
|
-
```js
|
|
69
|
-
window.ChaiTailwind.init();
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
64
|
## 🎨 Utility Classes
|
|
75
65
|
|
|
76
|
-
###
|
|
66
|
+
### Background Colors
|
|
77
67
|
|
|
78
68
|
| Class | CSS |
|
|
79
69
|
|---|---|
|
|
@@ -85,9 +75,7 @@ window.ChaiTailwind.init();
|
|
|
85
75
|
| `chai-bg-white` | `background-color: #ffffff` |
|
|
86
76
|
| `chai-bg-black` | `background-color: #000000` |
|
|
87
77
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
### ✍️ Text & Typography
|
|
78
|
+
### Text & Typography
|
|
91
79
|
|
|
92
80
|
| Class | CSS |
|
|
93
81
|
|---|---|
|
|
@@ -101,9 +89,7 @@ window.ChaiTailwind.init();
|
|
|
101
89
|
| `chai-font-bold` | `font-weight: bold` |
|
|
102
90
|
| `chai-font-medium` | `font-weight: 500` |
|
|
103
91
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
### 📦 Spacing
|
|
92
|
+
### Spacing
|
|
107
93
|
|
|
108
94
|
| Class | CSS |
|
|
109
95
|
|---|---|
|
|
@@ -117,9 +103,7 @@ window.ChaiTailwind.init();
|
|
|
117
103
|
| `chai-m-4` | `margin: 16px` |
|
|
118
104
|
| `chai-m-auto` | `margin: auto` |
|
|
119
105
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
### 🔲 Borders & Radius
|
|
106
|
+
### Borders & Radius
|
|
123
107
|
|
|
124
108
|
| Class | CSS |
|
|
125
109
|
|---|---|
|
|
@@ -133,9 +117,7 @@ window.ChaiTailwind.init();
|
|
|
133
117
|
| `chai-rounded-xl` | `border-radius: 16px` |
|
|
134
118
|
| `chai-rounded-full` | `border-radius: 9999px` |
|
|
135
119
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
### 📐 Layout & Flexbox
|
|
120
|
+
### Layout & Flexbox
|
|
139
121
|
|
|
140
122
|
| Class | CSS |
|
|
141
123
|
|---|---|
|
|
@@ -153,57 +135,83 @@ window.ChaiTailwind.init();
|
|
|
153
135
|
| `chai-gap-2` | `gap: 8px` |
|
|
154
136
|
| `chai-gap-4` | `gap: 16px` |
|
|
155
137
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
### 📏 Sizing
|
|
138
|
+
### Effects & Misc
|
|
159
139
|
|
|
160
140
|
| Class | CSS |
|
|
161
141
|
|---|---|
|
|
162
|
-
| `chai-
|
|
163
|
-
| `chai-
|
|
164
|
-
| `chai-
|
|
165
|
-
| `chai-
|
|
166
|
-
| `chai-
|
|
167
|
-
| `chai-
|
|
168
|
-
| `chai-
|
|
169
|
-
| `chai-
|
|
142
|
+
| `chai-shadow-sm` | subtle shadow |
|
|
143
|
+
| `chai-shadow-md` | medium shadow |
|
|
144
|
+
| `chai-shadow-lg` | strong shadow |
|
|
145
|
+
| `chai-transition` | smooth transition |
|
|
146
|
+
| `chai-cursor-pointer` | pointer cursor |
|
|
147
|
+
| `chai-text-center` | center text |
|
|
148
|
+
| `chai-text-left` | left text |
|
|
149
|
+
| `chai-text-right` | right text |
|
|
150
|
+
| `chai-overflow-hidden` | hide overflow |
|
|
151
|
+
| `chai-opacity-50` | 50% opacity |
|
|
152
|
+
| `chai-opacity-75` | 75% opacity |
|
|
153
|
+
| `chai-opacity-100` | 100% opacity |
|
|
170
154
|
|
|
171
155
|
---
|
|
172
156
|
|
|
173
|
-
|
|
157
|
+
## Animations
|
|
174
158
|
|
|
175
|
-
| Class |
|
|
159
|
+
| Class | Effect |
|
|
176
160
|
|---|---|
|
|
177
|
-
| `chai-
|
|
178
|
-
| `chai-
|
|
179
|
-
| `chai-
|
|
180
|
-
| `chai-
|
|
181
|
-
| `chai-left-0` | `left: 0` |
|
|
182
|
-
| `chai-right-0` | `right: 0` |
|
|
183
|
-
| `chai-bottom-0` | `bottom: 0` |
|
|
161
|
+
| `chai-animate-fade-in` | fade in |
|
|
162
|
+
| `chai-animate-slide-up` | slide from bottom |
|
|
163
|
+
| `chai-animate-bounce` | bouncing |
|
|
164
|
+
| `chai-animate-spin` | spinning |
|
|
184
165
|
|
|
185
166
|
---
|
|
186
167
|
|
|
187
|
-
|
|
168
|
+
## Hover Utilities
|
|
188
169
|
|
|
189
|
-
| Class |
|
|
170
|
+
| Class | Effect |
|
|
190
171
|
|---|---|
|
|
191
|
-
| `chai-
|
|
192
|
-
| `chai-
|
|
193
|
-
| `chai-
|
|
194
|
-
| `chai-
|
|
195
|
-
| `chai-
|
|
196
|
-
| `chai-
|
|
197
|
-
| `chai-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
172
|
+
| `chai-hover-bg-red` | change bg on hover |
|
|
173
|
+
| `chai-hover-bg-blue` | change bg on hover |
|
|
174
|
+
| `chai-hover-scale` | scale up |
|
|
175
|
+
| `chai-hover-opacity-75` | reduce opacity |
|
|
176
|
+
| `chai-hover-tilt` | tilt right |
|
|
177
|
+
| `chai-hover-tilt-left` | tilt left |
|
|
178
|
+
| `chai-hover-tilt-3d` | 3D tilt effect |
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## 3D Tilt Cards (Mouse-Based)
|
|
183
|
+
|
|
184
|
+
Interactive tilt based on cursor position.
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<div class="chai-card chai-tilt-3d chai-bg-white chai-p-6 chai-rounded-lg chai-shadow-lg">
|
|
188
|
+
Move mouse on me
|
|
189
|
+
</div>
|
|
190
|
+
```
|
|
203
191
|
|
|
204
|
-
|
|
192
|
+
> 👉 The card tilts dynamically based on cursor position.
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## 💡 Example
|
|
197
|
+
|
|
198
|
+
```html
|
|
199
|
+
<div class="
|
|
200
|
+
chai-card
|
|
201
|
+
chai-bg-blue
|
|
202
|
+
chai-text-white
|
|
203
|
+
chai-p-4
|
|
204
|
+
chai-rounded-lg
|
|
205
|
+
chai-shadow-lg
|
|
206
|
+
chai-hover-scale
|
|
207
|
+
">
|
|
208
|
+
Hover me
|
|
209
|
+
</div>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
---
|
|
205
213
|
|
|
206
|
-
## License
|
|
207
214
|
|
|
208
|
-
|
|
215
|
+
## 📄 License
|
|
209
216
|
|
|
217
|
+
MIT © 2026 Mohammad Saif
|
package/dist/chai-tailwind.js
CHANGED
|
@@ -1 +1,39 @@
|
|
|
1
|
-
"use strict";(()=>{
|
|
1
|
+
"use strict";(()=>{function s(){let e=document.createElement("style");e.innerHTML=`
|
|
2
|
+
@keyframes chai-fade-in {
|
|
3
|
+
from { opacity: 0; }
|
|
4
|
+
to { opacity: 1; }
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@keyframes chai-slide-up {
|
|
8
|
+
from { transform: translateY(20px); opacity: 0; }
|
|
9
|
+
to { transform: translateY(0); opacity: 1; }
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@keyframes chai-bounce {
|
|
13
|
+
0%, 100% { transform: translateY(0); }
|
|
14
|
+
50% { transform: translateY(-10px); }
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes chai-spin {
|
|
18
|
+
from { transform: rotate(0deg); }
|
|
19
|
+
to { transform: rotate(360deg); }
|
|
20
|
+
}
|
|
21
|
+
`,document.head.appendChild(e)}var m={"chai-bg-red":{backgroundColor:"red"},"chai-bg-blue":{backgroundColor:"blue"},"chai-bg-green":{backgroundColor:"green"},"chai-bg-yellow":{backgroundColor:"yellow"},"chai-bg-gray":{backgroundColor:"#6b7280"},"chai-bg-white":{backgroundColor:"#ffffff"},"chai-bg-black":{backgroundColor:"#000000"},"chai-text-white":{color:"white"},"chai-text-black":{color:"black"},"chai-text-gray":{color:"#6b7280"},"chai-text-sm":{fontSize:"12px"},"chai-text-base":{fontSize:"16px"},"chai-text-lg":{fontSize:"18px"},"chai-text-xl":{fontSize:"20px"},"chai-font-bold":{fontWeight:"bold"},"chai-font-medium":{fontWeight:"500"},"chai-p-1":{padding:"4px"},"chai-p-2":{padding:"8px"},"chai-p-3":{padding:"12px"},"chai-p-4":{padding:"16px"},"chai-p-6":{padding:"24px"},"chai-m-1":{margin:"4px"},"chai-m-2":{margin:"8px"},"chai-m-4":{margin:"16px"},"chai-m-auto":{margin:"auto"},"chai-rounded-sm":{borderRadius:"4px"},"chai-rounded-md":{borderRadius:"8px"},"chai-rounded-lg":{borderRadius:"12px"},"chai-rounded-xl":{borderRadius:"16px"},"chai-rounded-full":{borderRadius:"9999px"},"chai-border":{border:"1px solid #e5e7eb"},"chai-border-2":{border:"2px solid #e5e7eb"},"chai-border-black":{borderColor:"#000"},"chai-border-white":{borderColor:"#fff"},"chai-w-full":{width:"100%"},"chai-w-screen":{width:"100vw"},"chai-w-fit":{width:"fit-content"},"chai-h-full":{height:"100%"},"chai-h-screen":{height:"100vh"},"chai-max-w-sm":{maxWidth:"640px"},"chai-max-w-md":{maxWidth:"768px"},"chai-max-w-lg":{maxWidth:"1024px"},"chai-flex":{display:"flex"},"chai-inline-flex":{display:"inline-flex"},"chai-flex-col":{flexDirection:"column"},"chai-flex-row":{flexDirection:"row"},"chai-flex-wrap":{flexWrap:"wrap"},"chai-items-center":{alignItems:"center"},"chai-items-start":{alignItems:"flex-start"},"chai-items-end":{alignItems:"flex-end"},"chai-justify-center":{justifyContent:"center"},"chai-justify-between":{justifyContent:"space-between"},"chai-justify-around":{justifyContent:"space-around"},"chai-gap-2":{gap:"8px"},"chai-gap-4":{gap:"16px"},"chai-relative":{position:"relative"},"chai-absolute":{position:"absolute"},"chai-fixed":{position:"fixed"},"chai-top-0":{top:"0"},"chai-left-0":{left:"0"},"chai-right-0":{right:"0"},"chai-bottom-0":{bottom:"0"},"chai-block":{display:"block"},"chai-inline-block":{display:"inline-block"},"chai-hidden":{display:"none"},"chai-shadow-sm":{boxShadow:"0 1px 2px rgba(0,0,0,0.1)"},"chai-shadow-md":{boxShadow:"0 4px 6px rgba(0,0,0,0.1)"},"chai-shadow-lg":{boxShadow:"0 10px 15px rgba(0,0,0,0.2)"},"chai-transition":{transition:"all 0.3s ease"},"chai-cursor-pointer":{cursor:"pointer"},"chai-text-center":{textAlign:"center"},"chai-text-left":{textAlign:"left"},"chai-text-right":{textAlign:"right"},"chai-overflow-hidden":{overflow:"hidden"},"chai-opacity-50":{opacity:"0.5"},"chai-opacity-75":{opacity:"0.75"},"chai-opacity-100":{opacity:"1"},"chai-animate-fade-in":{animation:"chai-fade-in 0.5s ease-in-out"},"chai-animate-slide-up":{animation:"chai-slide-up 0.4s ease-out"},"chai-animate-bounce":{animation:"chai-bounce 1s infinite"},"chai-animate-spin":{animation:"chai-spin 1s linear infinite"},"chai-card":{transition:"transform 0.3s ease, box-shadow 0.3s ease",transformStyle:"preserve-3d"},"chai-tilt-3d":{transition:"transform 0.15s ease-out",transformStyle:"preserve-3d",willChange:"transform"}};function l(){let e=document.createElement("style"),t="";Object.entries(m).forEach(([i,a])=>{let n=`.${i}`,c=Object.entries(a).map(([o,r])=>`${camelToKebab(o)}: ${r}`).join("; ");t+=`${n} { ${c}; }
|
|
22
|
+
`}),e.innerHTML=t,document.head.appendChild(e)}var u={"chai-hover-bg-red":{backgroundColor:"red"},"chai-hover-bg-blue":{backgroundColor:"blue"},"chai-hover-scale":{transform:"scale(1.05)"},"chai-hover-opacity-75":{opacity:"0.75"},"chai-hover-tilt":{transform:"rotate(3deg) scale(1.03)"},"chai-hover-tilt-left":{transform:"rotate(-3deg) scale(1.03)"},"chai-hover-tilt-3d":{transform:"perspective(1000px) rotateX(8deg) rotateY(8deg) scale(1.05)"}};function k(e){return e.replace(/[A-Z]/g,t=>"-"+t.toLowerCase())}function d(){let e=document.createElement("style"),t="";Object.entries(u).forEach(([i,a])=>{let n=`.${i}:hover`,c=Object.entries(a).map(([o,r])=>`${k(o)}: ${r}`).join("; ");t+=`${n} { ${c}; }
|
|
23
|
+
`}),e.innerHTML=t,document.head.appendChild(e)}function h(e){e.addEventListener("mousemove",i=>{let a=e.getBoundingClientRect(),n=i.clientX-a.left,c=i.clientY-a.top,o=n/a.width,r=c/a.height,b=(o-.5)*15*2,y=(.5-r)*15*2,w=1.06;e.style.transform=`
|
|
24
|
+
perspective(1000px)
|
|
25
|
+
rotateX(${y}deg)
|
|
26
|
+
rotateY(${b}deg)
|
|
27
|
+
scale(${w})
|
|
28
|
+
`;let C=o*100,v=r*100;e.style.background=`
|
|
29
|
+
radial-gradient(
|
|
30
|
+
circle at ${C}% ${v}%,
|
|
31
|
+
rgba(255,255,255,0.15),
|
|
32
|
+
transparent 60%
|
|
33
|
+
)
|
|
34
|
+
`}),e.addEventListener("mouseleave",()=>{e.style.transform=`
|
|
35
|
+
perspective(1000px)
|
|
36
|
+
rotateX(0deg)
|
|
37
|
+
rotateY(0deg)
|
|
38
|
+
scale(1)
|
|
39
|
+
`,e.style.background=""})}function p(){document.querySelectorAll(".chai-tilt-3d").forEach(t=>h(t))}function x(){s(),l(),d(),p()}var g=!1;function f(){g||(g=!0,x())}typeof window<"u"&&(window.ChaiTailwind={init:f},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",f):f());})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chai-tailwind",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "A package that you can use to build mordern website, just like tailwind, But you shouldn't since tailwind is already there, It was just a fun project to learn dom.",
|
|
5
5
|
"main": "dist/chai-tailwind.js",
|
|
6
6
|
"unpkg": "dist/chai-tailwind.js",
|