chai-tailwind 1.0.6 → 1.0.7

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.
Files changed (2) hide show
  1. package/Readme.md +248 -12
  2. package/package.json +1 -1
package/Readme.md CHANGED
@@ -9,6 +9,8 @@ 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
+ - 🎨 60+ colors with shade variants (50–900 scale)
13
+ - 🌈 Built-in gradient background utilities
12
14
  - 🎬 Built-in animations (fade, slide, bounce, spin)
13
15
  - 🖱️ Hover utilities (scale, tilt, color, opacity)
14
16
  - 🧊 Interactive 3D tilt cards (mouse-based)
@@ -52,7 +54,7 @@ Automatically initializes and applies styles.
52
54
  <script src="https://cdn.jsdelivr.net/npm/chai-tailwind@1.1.0/dist/chai-tailwind.js"></script>
53
55
  </head>
54
56
  <body>
55
- <div class="chai-bg-red chai-text-white chai-p-4">
57
+ <div class="chai-bg-amber chai-text-black chai-p-4 chai-rounded-lg">
56
58
  Hello World 🚀
57
59
  </div>
58
60
  </body>
@@ -63,7 +65,7 @@ Automatically initializes and applies styles.
63
65
 
64
66
  ## 🎨 Utility Classes
65
67
 
66
- ### Background Colors
68
+ ### Background Colors — Solid
67
69
 
68
70
  | Class | CSS |
69
71
  |---|---|
@@ -71,17 +73,161 @@ Automatically initializes and applies styles.
71
73
  | `chai-bg-blue` | `background-color: blue` |
72
74
  | `chai-bg-green` | `background-color: green` |
73
75
  | `chai-bg-yellow` | `background-color: yellow` |
76
+ | `chai-bg-orange` | `background-color: #f97316` |
77
+ | `chai-bg-purple` | `background-color: #a855f7` |
78
+ | `chai-bg-pink` | `background-color: #ec4899` |
79
+ | `chai-bg-teal` | `background-color: #14b8a6` |
80
+ | `chai-bg-cyan` | `background-color: #06b6d4` |
81
+ | `chai-bg-indigo` | `background-color: #6366f1` |
82
+ | `chai-bg-lime` | `background-color: #84cc16` |
83
+ | `chai-bg-amber` | `background-color: #f59e0b` |
84
+ | `chai-bg-emerald` | `background-color: #10b981` |
85
+ | `chai-bg-rose` | `background-color: #f43f5e` |
86
+ | `chai-bg-violet` | `background-color: #8b5cf6` |
87
+ | `chai-bg-fuchsia` | `background-color: #d946ef` |
88
+ | `chai-bg-sky` | `background-color: #0ea5e9` |
89
+ | `chai-bg-slate` | `background-color: #64748b` |
90
+ | `chai-bg-zinc` | `background-color: #71717a` |
91
+ | `chai-bg-stone` | `background-color: #78716c` |
92
+ | `chai-bg-brown` | `background-color: #92400e` |
93
+ | `chai-bg-coral` | `background-color: #f87171` |
94
+ | `chai-bg-gold` | `background-color: #fbbf24` |
95
+ | `chai-bg-silver` | `background-color: #9ca3af` |
96
+ | `chai-bg-navy` | `background-color: #1e3a5f` |
97
+ | `chai-bg-maroon` | `background-color: #7f1d1d` |
98
+ | `chai-bg-olive` | `background-color: #4d7c0f` |
74
99
  | `chai-bg-gray` | `background-color: #6b7280` |
75
100
  | `chai-bg-white` | `background-color: #ffffff` |
76
101
  | `chai-bg-black` | `background-color: #000000` |
77
102
 
78
- ### Text & Typography
103
+ ### Background Colors — Shade Variants
104
+
105
+ Each shade follows the 50 → 100 → 200 → 500 → 700 → 900 scale.
106
+
107
+ | Class | CSS |
108
+ |---|---|
109
+ | `chai-bg-red-50` | `background-color: #fef2f2` |
110
+ | `chai-bg-red-100` | `background-color: #fee2e2` |
111
+ | `chai-bg-red-200` | `background-color: #fecaca` |
112
+ | `chai-bg-red-500` | `background-color: #ef4444` |
113
+ | `chai-bg-red-700` | `background-color: #b91c1c` |
114
+ | `chai-bg-red-900` | `background-color: #7f1d1d` |
115
+ | `chai-bg-blue-50` | `background-color: #eff6ff` |
116
+ | `chai-bg-blue-100` | `background-color: #dbeafe` |
117
+ | `chai-bg-blue-200` | `background-color: #bfdbfe` |
118
+ | `chai-bg-blue-500` | `background-color: #3b82f6` |
119
+ | `chai-bg-blue-700` | `background-color: #1d4ed8` |
120
+ | `chai-bg-blue-900` | `background-color: #1e3a8a` |
121
+ | `chai-bg-green-50` | `background-color: #f0fdf4` |
122
+ | `chai-bg-green-100` | `background-color: #dcfce7` |
123
+ | `chai-bg-green-200` | `background-color: #bbf7d0` |
124
+ | `chai-bg-green-500` | `background-color: #22c55e` |
125
+ | `chai-bg-green-700` | `background-color: #15803d` |
126
+ | `chai-bg-green-900` | `background-color: #14532d` |
127
+ | `chai-bg-yellow-50` | `background-color: #fefce8` |
128
+ | `chai-bg-yellow-100` | `background-color: #fef9c3` |
129
+ | `chai-bg-yellow-200` | `background-color: #fef08a` |
130
+ | `chai-bg-yellow-500` | `background-color: #eab308` |
131
+ | `chai-bg-yellow-700` | `background-color: #a16207` |
132
+ | `chai-bg-purple-50` | `background-color: #faf5ff` |
133
+ | `chai-bg-purple-100` | `background-color: #f3e8ff` |
134
+ | `chai-bg-purple-200` | `background-color: #e9d5ff` |
135
+ | `chai-bg-purple-500` | `background-color: #a855f7` |
136
+ | `chai-bg-purple-700` | `background-color: #7e22ce` |
137
+ | `chai-bg-purple-900` | `background-color: #4a044e` |
138
+ | `chai-bg-pink-50` | `background-color: #fdf2f8` |
139
+ | `chai-bg-pink-100` | `background-color: #fce7f3` |
140
+ | `chai-bg-pink-500` | `background-color: #ec4899` |
141
+ | `chai-bg-pink-700` | `background-color: #be185d` |
142
+ | `chai-bg-orange-50` | `background-color: #fff7ed` |
143
+ | `chai-bg-orange-100` | `background-color: #ffedd5` |
144
+ | `chai-bg-orange-500` | `background-color: #f97316` |
145
+ | `chai-bg-orange-700` | `background-color: #c2410c` |
146
+ | `chai-bg-teal-50` | `background-color: #f0fdfa` |
147
+ | `chai-bg-teal-100` | `background-color: #ccfbf1` |
148
+ | `chai-bg-teal-500` | `background-color: #14b8a6` |
149
+ | `chai-bg-teal-700` | `background-color: #0f766e` |
150
+ | `chai-bg-indigo-50` | `background-color: #eef2ff` |
151
+ | `chai-bg-indigo-100` | `background-color: #e0e7ff` |
152
+ | `chai-bg-indigo-500` | `background-color: #6366f1` |
153
+ | `chai-bg-indigo-700` | `background-color: #4338ca` |
154
+ | `chai-bg-gray-50` | `background-color: #f9fafb` |
155
+ | `chai-bg-gray-100` | `background-color: #f3f4f6` |
156
+ | `chai-bg-gray-200` | `background-color: #e5e7eb` |
157
+ | `chai-bg-gray-300` | `background-color: #d1d5db` |
158
+ | `chai-bg-gray-400` | `background-color: #9ca3af` |
159
+ | `chai-bg-gray-500` | `background-color: #6b7280` |
160
+ | `chai-bg-gray-600` | `background-color: #4b5563` |
161
+ | `chai-bg-gray-700` | `background-color: #374151` |
162
+ | `chai-bg-gray-800` | `background-color: #1f2937` |
163
+ | `chai-bg-gray-900` | `background-color: #111827` |
164
+
165
+ ### Background Colors — Gradients
166
+
167
+ | Class | CSS |
168
+ |---|---|
169
+ | `chai-bg-gradient-to-r-red-orange` | `background: linear-gradient(to right, #ef4444, #f97316)` |
170
+ | `chai-bg-gradient-to-r-blue-purple` | `background: linear-gradient(to right, #3b82f6, #a855f7)` |
171
+ | `chai-bg-gradient-to-r-green-teal` | `background: linear-gradient(to right, #22c55e, #14b8a6)` |
172
+ | `chai-bg-gradient-to-r-pink-rose` | `background: linear-gradient(to right, #ec4899, #f43f5e)` |
173
+ | `chai-bg-gradient-to-r-yellow-amber` | `background: linear-gradient(to right, #eab308, #f59e0b)` |
174
+ | `chai-bg-gradient-to-br-indigo-purple` | `background: linear-gradient(to bottom right, #6366f1, #a855f7)` |
175
+ | `chai-bg-gradient-to-br-sky-blue` | `background: linear-gradient(to bottom right, #0ea5e9, #3b82f6)` |
176
+
177
+ ---
178
+
179
+ ### Text & Typography
79
180
 
80
181
  | Class | CSS |
81
182
  |---|---|
82
183
  | `chai-text-white` | `color: white` |
83
184
  | `chai-text-black` | `color: black` |
84
185
  | `chai-text-gray` | `color: #6b7280` |
186
+ | `chai-text-red` | `color: #ef4444` |
187
+ | `chai-text-blue` | `color: #3b82f6` |
188
+ | `chai-text-green` | `color: #22c55e` |
189
+ | `chai-text-yellow` | `color: #eab308` |
190
+ | `chai-text-orange` | `color: #f97316` |
191
+ | `chai-text-purple` | `color: #a855f7` |
192
+ | `chai-text-pink` | `color: #ec4899` |
193
+ | `chai-text-teal` | `color: #14b8a6` |
194
+ | `chai-text-cyan` | `color: #06b6d4` |
195
+ | `chai-text-indigo` | `color: #6366f1` |
196
+ | `chai-text-amber` | `color: #f59e0b` |
197
+ | `chai-text-emerald` | `color: #10b981` |
198
+ | `chai-text-rose` | `color: #f43f5e` |
199
+ | `chai-text-violet` | `color: #8b5cf6` |
200
+ | `chai-text-slate` | `color: #64748b` |
201
+ | `chai-text-lime` | `color: #84cc16` |
202
+ | `chai-text-sky` | `color: #0ea5e9` |
203
+
204
+ **Shade variants** — available for `red`, `blue`, `green`, `purple`, `orange`, `teal`, `gray`:
205
+
206
+ | Class | CSS |
207
+ |---|---|
208
+ | `chai-text-red-400` | `color: #f87171` |
209
+ | `chai-text-red-600` | `color: #dc2626` |
210
+ | `chai-text-blue-400` | `color: #60a5fa` |
211
+ | `chai-text-blue-600` | `color: #2563eb` |
212
+ | `chai-text-green-400` | `color: #4ade80` |
213
+ | `chai-text-green-600` | `color: #16a34a` |
214
+ | `chai-text-gray-400` | `color: #9ca3af` |
215
+ | `chai-text-gray-500` | `color: #6b7280` |
216
+ | `chai-text-gray-600` | `color: #4b5563` |
217
+ | `chai-text-gray-700` | `color: #374151` |
218
+ | `chai-text-gray-800` | `color: #1f2937` |
219
+ | `chai-text-gray-900` | `color: #111827` |
220
+ | `chai-text-purple-400` | `color: #c084fc` |
221
+ | `chai-text-purple-600` | `color: #9333ea` |
222
+ | `chai-text-orange-400` | `color: #fb923c` |
223
+ | `chai-text-orange-600` | `color: #ea580c` |
224
+ | `chai-text-teal-400` | `color: #2dd4bf` |
225
+ | `chai-text-teal-600` | `color: #0d9488` |
226
+
227
+ **Font size & weight:**
228
+
229
+ | Class | CSS |
230
+ |---|---|
85
231
  | `chai-text-sm` | `font-size: 12px` |
86
232
  | `chai-text-base` | `font-size: 16px` |
87
233
  | `chai-text-lg` | `font-size: 18px` |
@@ -89,7 +235,9 @@ Automatically initializes and applies styles.
89
235
  | `chai-font-bold` | `font-weight: bold` |
90
236
  | `chai-font-medium` | `font-weight: 500` |
91
237
 
92
- ### Spacing
238
+ ---
239
+
240
+ ### Spacing
93
241
 
94
242
  | Class | CSS |
95
243
  |---|---|
@@ -103,7 +251,9 @@ Automatically initializes and applies styles.
103
251
  | `chai-m-4` | `margin: 16px` |
104
252
  | `chai-m-auto` | `margin: auto` |
105
253
 
106
- ### Borders & Radius
254
+ ---
255
+
256
+ ### Borders & Radius
107
257
 
108
258
  | Class | CSS |
109
259
  |---|---|
@@ -111,13 +261,31 @@ Automatically initializes and applies styles.
111
261
  | `chai-border-2` | `2px solid #e5e7eb` |
112
262
  | `chai-border-black` | `border-color: #000` |
113
263
  | `chai-border-white` | `border-color: #fff` |
264
+ | `chai-border-red` | `border-color: #ef4444` |
265
+ | `chai-border-blue` | `border-color: #3b82f6` |
266
+ | `chai-border-green` | `border-color: #22c55e` |
267
+ | `chai-border-yellow` | `border-color: #eab308` |
268
+ | `chai-border-orange` | `border-color: #f97316` |
269
+ | `chai-border-purple` | `border-color: #a855f7` |
270
+ | `chai-border-pink` | `border-color: #ec4899` |
271
+ | `chai-border-teal` | `border-color: #14b8a6` |
272
+ | `chai-border-cyan` | `border-color: #06b6d4` |
273
+ | `chai-border-indigo` | `border-color: #6366f1` |
274
+ | `chai-border-gray-200` | `border-color: #e5e7eb` |
275
+ | `chai-border-gray-300` | `border-color: #d1d5db` |
276
+ | `chai-border-gray-400` | `border-color: #9ca3af` |
277
+ | `chai-border-gray-600` | `border-color: #4b5563` |
278
+ | `chai-border-gray-700` | `border-color: #374151` |
279
+ | `chai-border-gray-800` | `border-color: #1f2937` |
114
280
  | `chai-rounded-sm` | `border-radius: 4px` |
115
281
  | `chai-rounded-md` | `border-radius: 8px` |
116
282
  | `chai-rounded-lg` | `border-radius: 12px` |
117
283
  | `chai-rounded-xl` | `border-radius: 16px` |
118
284
  | `chai-rounded-full` | `border-radius: 9999px` |
119
285
 
120
- ### Layout & Flexbox
286
+ ---
287
+
288
+ ### Layout & Flexbox
121
289
 
122
290
  | Class | CSS |
123
291
  |---|---|
@@ -134,8 +302,32 @@ Automatically initializes and applies styles.
134
302
  | `chai-justify-around` | `justify-content: space-around` |
135
303
  | `chai-gap-2` | `gap: 8px` |
136
304
  | `chai-gap-4` | `gap: 16px` |
305
+ | `chai-w-full` | `width: 100%` |
306
+ | `chai-w-screen` | `width: 100vw` |
307
+ | `chai-w-fit` | `width: fit-content` |
308
+ | `chai-h-full` | `height: 100%` |
309
+ | `chai-h-screen` | `height: 100vh` |
310
+ | `chai-max-w-sm` | `max-width: 640px` |
311
+ | `chai-max-w-md` | `max-width: 768px` |
312
+ | `chai-max-w-lg` | `max-width: 1024px` |
313
+
314
+ ---
137
315
 
138
- ### Effects & Misc
316
+ ### Positioning
317
+
318
+ | Class | CSS |
319
+ |---|---|
320
+ | `chai-relative` | `position: relative` |
321
+ | `chai-absolute` | `position: absolute` |
322
+ | `chai-fixed` | `position: fixed` |
323
+ | `chai-top-0` | `top: 0` |
324
+ | `chai-left-0` | `left: 0` |
325
+ | `chai-right-0` | `right: 0` |
326
+ | `chai-bottom-0` | `bottom: 0` |
327
+
328
+ ---
329
+
330
+ ### Effects & Misc
139
331
 
140
332
  | Class | CSS |
141
333
  |---|---|
@@ -151,10 +343,13 @@ Automatically initializes and applies styles.
151
343
  | `chai-opacity-50` | 50% opacity |
152
344
  | `chai-opacity-75` | 75% opacity |
153
345
  | `chai-opacity-100` | 100% opacity |
346
+ | `chai-block` | `display: block` |
347
+ | `chai-inline-block` | `display: inline-block` |
348
+ | `chai-hidden` | `display: none` |
154
349
 
155
350
  ---
156
351
 
157
- ## Animations
352
+ ## Animations
158
353
 
159
354
  | Class | Effect |
160
355
  |---|---|
@@ -165,7 +360,7 @@ Automatically initializes and applies styles.
165
360
 
166
361
  ---
167
362
 
168
- ## Hover Utilities
363
+ ## Hover Utilities
169
364
 
170
365
  | Class | Effect |
171
366
  |---|---|
@@ -179,7 +374,7 @@ Automatically initializes and applies styles.
179
374
 
180
375
  ---
181
376
 
182
- ## 3D Tilt Cards (Mouse-Based)
377
+ ## 3D Tilt Cards (Mouse-Based)
183
378
 
184
379
  Interactive tilt based on cursor position.
185
380
 
@@ -193,7 +388,34 @@ Interactive tilt based on cursor position.
193
388
 
194
389
  ---
195
390
 
196
- ## 💡 Example
391
+ ## 💡 Examples
392
+
393
+ ### Gradient Button
394
+
395
+ ```html
396
+ <button class="
397
+ chai-bg-gradient-to-r-blue-purple
398
+ chai-text-white
399
+ chai-p-4
400
+ chai-rounded-full
401
+ chai-shadow-md
402
+ chai-hover-scale
403
+ chai-transition
404
+ ">
405
+ Click me 🚀
406
+ </button>
407
+ ```
408
+
409
+ ### Shade-based Card
410
+
411
+ ```html
412
+ <div class="chai-bg-purple-100 chai-border chai-border-purple-500 chai-rounded-xl chai-p-6">
413
+ <h2 class="chai-text-purple-600 chai-font-bold chai-text-xl">Card Title</h2>
414
+ <p class="chai-text-gray-600 chai-text-base">Card description here.</p>
415
+ </div>
416
+ ```
417
+
418
+ ### Hover Color Change
197
419
 
198
420
  ```html
199
421
  <div class="
@@ -209,8 +431,22 @@ Interactive tilt based on cursor position.
209
431
  </div>
210
432
  ```
211
433
 
212
- ---
434
+ ### Animated Badge
435
+
436
+ ```html
437
+ <span class="
438
+ chai-bg-amber
439
+ chai-text-black
440
+ chai-p-2
441
+ chai-rounded-full
442
+ chai-font-bold
443
+ chai-animate-bounce
444
+ ">
445
+ New ✨
446
+ </span>
447
+ ```
213
448
 
449
+ ---
214
450
 
215
451
  ## 📄 License
216
452
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chai-tailwind",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
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",