create-chai-tailwind-app 1.0.2 → 1.0.4
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 +349 -0
- package/package.json +1 -1
- package/template/index.html +21 -9
package/README.md
ADDED
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
# Chai CSS
|
|
2
|
+
|
|
3
|
+
A lightweight utility-first CSS engine inspired by Tailwind — but simpler, faster, and fully class-driven.
|
|
4
|
+
|
|
5
|
+
Create a project instantly and start writing CSS using intuitive class names.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Getting Started
|
|
10
|
+
|
|
11
|
+
Create a new app using:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npx create-chai-app my-app
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then navigate into your project:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
cd my-app
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Build the CSS:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm run build
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Now open:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
template/index.html
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
You can start using Chai classes directly inside HTML.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Project Structure
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
my-app/
|
|
43
|
+
├── template/
|
|
44
|
+
│ ├── dist/ → Generated CSS output
|
|
45
|
+
│ ├── index.html → Your main file
|
|
46
|
+
│ └── package.json
|
|
47
|
+
├── package.json
|
|
48
|
+
└── README.md
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## How It Works
|
|
54
|
+
|
|
55
|
+
You don’t write CSS manually.
|
|
56
|
+
|
|
57
|
+
You write **class names**, and Chai converts them into real CSS.
|
|
58
|
+
|
|
59
|
+
Example:
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<div class="chai-bg-blue-500 chai-text-white chai-p-20"></div>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Generated CSS:
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
.chai-bg-blue-500 { background-color: #3b82f6; }
|
|
69
|
+
.chai-text-white { color: #ffffff; }
|
|
70
|
+
.chai-p-20 { padding: 20px; }
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Quick Starter Example
|
|
76
|
+
|
|
77
|
+
Paste this inside `index.html`:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<!DOCTYPE html>
|
|
81
|
+
<html>
|
|
82
|
+
<head>
|
|
83
|
+
<link rel="stylesheet" href="./dist/output.css">
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
|
|
87
|
+
<div class="
|
|
88
|
+
chai-flex
|
|
89
|
+
chai-justify-center
|
|
90
|
+
chai-items-center
|
|
91
|
+
chai-h-screen
|
|
92
|
+
chai-bg-gradient-indigo-blue
|
|
93
|
+
">
|
|
94
|
+
<div class="
|
|
95
|
+
chai-bg-white
|
|
96
|
+
chai-p-20
|
|
97
|
+
chai-rounded-10
|
|
98
|
+
chai-shadow-md
|
|
99
|
+
chai-text-center
|
|
100
|
+
chai-transition
|
|
101
|
+
chai-duration-300
|
|
102
|
+
chai-hover-bg-blue-500
|
|
103
|
+
chai-hover-text-white
|
|
104
|
+
chai-cursor-pointer
|
|
105
|
+
">
|
|
106
|
+
Hello Chai CSS
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Core Concepts
|
|
117
|
+
|
|
118
|
+
### 1. Spacing
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
chai-p-20 → padding: 20px
|
|
122
|
+
chai-mx-auto → center horizontally
|
|
123
|
+
chai-px-10 → left + right padding
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
### 2. Colors
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
chai-bg-red-500
|
|
132
|
+
chai-text-blue-300
|
|
133
|
+
chai-bc-gray-200
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
### 3. Flexbox
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
chai-flex
|
|
142
|
+
chai-justify-between
|
|
143
|
+
chai-items-center
|
|
144
|
+
chai-gap-10
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
### 4. Size
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
chai-w-200
|
|
153
|
+
chai-h-100
|
|
154
|
+
chai-w-full
|
|
155
|
+
chai-h-screen
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
### 5. Typography
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
chai-fs-18
|
|
164
|
+
chai-fw-semibold
|
|
165
|
+
chai-text-center
|
|
166
|
+
chai-lh-24
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
### 6. Borders
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
chai-border
|
|
175
|
+
chai-bw-2
|
|
176
|
+
chai-rounded-10
|
|
177
|
+
chai-rounded-full
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
### 7. Shadows
|
|
183
|
+
|
|
184
|
+
```html
|
|
185
|
+
chai-shadow-md
|
|
186
|
+
chai-shadow-0px-4px-10px-gray
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
### 8. Backgrounds
|
|
192
|
+
|
|
193
|
+
```html
|
|
194
|
+
chai-bg-gradient-indigo-blue
|
|
195
|
+
chai-bg-img-hero
|
|
196
|
+
chai-bg-cover
|
|
197
|
+
chai-bg-center
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
### 9. Hover Effects
|
|
203
|
+
|
|
204
|
+
```html
|
|
205
|
+
chai-hover-bg-blue-500
|
|
206
|
+
chai-hover-text-white
|
|
207
|
+
chai-hover-shadow-0px-4px-10px-black
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
### 10. Transitions
|
|
213
|
+
|
|
214
|
+
```html
|
|
215
|
+
chai-transition
|
|
216
|
+
chai-duration-300
|
|
217
|
+
chai-ease-in-out
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
### 11. Responsive Design
|
|
223
|
+
|
|
224
|
+
```html
|
|
225
|
+
chai-md-flex
|
|
226
|
+
chai-lg-gap-20
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
Applies styles only at specific screen sizes.
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
### 12. Interaction
|
|
234
|
+
|
|
235
|
+
```html
|
|
236
|
+
chai-cursor-pointer
|
|
237
|
+
chai-select-none
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
### 13. Layout
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
chai-block
|
|
246
|
+
chai-hidden
|
|
247
|
+
chai-relative
|
|
248
|
+
chai-absolute
|
|
249
|
+
chai-overflow-hidden
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
## Example: Card UI
|
|
255
|
+
|
|
256
|
+
```html
|
|
257
|
+
<div class="
|
|
258
|
+
chai-w-300
|
|
259
|
+
chai-p-20
|
|
260
|
+
chai-bg-white
|
|
261
|
+
chai-rounded-10
|
|
262
|
+
chai-shadow-md
|
|
263
|
+
chai-transition
|
|
264
|
+
chai-hover-shadow-lg
|
|
265
|
+
">
|
|
266
|
+
<h2 class="chai-fs-20 chai-fw-bold chai-mb-10">
|
|
267
|
+
Card Title
|
|
268
|
+
</h2>
|
|
269
|
+
|
|
270
|
+
<p class="chai-fs-14 chai-lh-20 chai-text-gray-600">
|
|
271
|
+
This is a simple card using Chai CSS utilities.
|
|
272
|
+
</p>
|
|
273
|
+
|
|
274
|
+
<button class="
|
|
275
|
+
chai-mt-15
|
|
276
|
+
chai-p-10
|
|
277
|
+
chai-bg-blue-500
|
|
278
|
+
chai-text-white
|
|
279
|
+
chai-rounded-5
|
|
280
|
+
chai-hover-bg-blue-700
|
|
281
|
+
">
|
|
282
|
+
Click Me
|
|
283
|
+
</button>
|
|
284
|
+
</div>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
## Development Workflow
|
|
290
|
+
|
|
291
|
+
Every time you add new classes:
|
|
292
|
+
|
|
293
|
+
```bash
|
|
294
|
+
npm run build
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
This regenerates your CSS.
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
## Mental Model
|
|
302
|
+
|
|
303
|
+
Instead of writing CSS like this:
|
|
304
|
+
|
|
305
|
+
```css
|
|
306
|
+
.card {
|
|
307
|
+
padding: 20px;
|
|
308
|
+
background: white;
|
|
309
|
+
border-radius: 10px;
|
|
310
|
+
}
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
You write:
|
|
314
|
+
|
|
315
|
+
```html
|
|
316
|
+
<div class="chai-p-20 chai-bg-white chai-rounded-10"></div>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
---
|
|
320
|
+
|
|
321
|
+
## Why Chai CSS?
|
|
322
|
+
|
|
323
|
+
* No config needed
|
|
324
|
+
* No learning curve like Tailwind
|
|
325
|
+
* Direct, readable class names
|
|
326
|
+
* Fully customizable system
|
|
327
|
+
* Lightweight and fast
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
## Advanced Usage
|
|
332
|
+
|
|
333
|
+
You can combine everything:
|
|
334
|
+
|
|
335
|
+
```html
|
|
336
|
+
<div class="
|
|
337
|
+
chai-flex
|
|
338
|
+
chai-md-flex-col
|
|
339
|
+
chai-gap-20
|
|
340
|
+
chai-bg-gradient-to-right-blue-500-purple-500
|
|
341
|
+
chai-p-30
|
|
342
|
+
chai-rounded-15
|
|
343
|
+
">
|
|
344
|
+
</div>
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
---
|
|
348
|
+
|
|
349
|
+
|
package/package.json
CHANGED
package/template/index.html
CHANGED
|
@@ -10,15 +10,20 @@
|
|
|
10
10
|
<!-- NAVBAR -->
|
|
11
11
|
<header class="chai-flex chai-justify-between chai-items-center chai-p-20 chai-glass">
|
|
12
12
|
|
|
13
|
-
<h2 class="chai-fw-bold chai-fs-24"
|
|
13
|
+
<h2 class="chai-fw-bold chai-fs-24"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cup-hot-fill" viewBox="0 0 16 16">
|
|
14
|
+
<path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6zM13 12.5a2 2 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5"/>
|
|
15
|
+
<path d="m4.4.8-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 3.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8m3 0-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 6.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8m3 0-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 9.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8"/>
|
|
16
|
+
</svg> ChaiTailwind</h2>
|
|
14
17
|
|
|
15
18
|
<div class="chai-flex chai-gap-10">
|
|
16
19
|
<button class="chai-btn">
|
|
17
|
-
|
|
20
|
+
<a href="https://www.npmjs.com/package/chai-tailwind-engine" target="_blank" class="chai-a">DOCS</a>
|
|
18
21
|
</button>
|
|
19
22
|
|
|
20
23
|
<button onclick="toggleDark()" class="chai-btn chai-bg-blue-500 chai-text-white">
|
|
21
|
-
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
|
|
25
|
+
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/>
|
|
26
|
+
</svg>
|
|
22
27
|
</button>
|
|
23
28
|
</div>
|
|
24
29
|
|
|
@@ -45,11 +50,11 @@
|
|
|
45
50
|
<div class="chai-flex chai-justify-center chai-gap-10">
|
|
46
51
|
|
|
47
52
|
<button class="chai-btn chai-bg-white chai-dark-bg-gray-800 chai-text-gray-900 chai-dark-text-white chai-shadow-premium">
|
|
48
|
-
Get Started
|
|
53
|
+
<a href="https://www.npmjs.com/package/create-chai-tailwind-app" target="_blank" class="chai-a">Get Started</a>
|
|
49
54
|
</button>
|
|
50
55
|
|
|
51
56
|
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
52
|
-
GitHub
|
|
57
|
+
<a href="https://github.com/SHIVAMYADAV25" class="chai-a" target="_blank">GitHub</a>
|
|
53
58
|
</button>
|
|
54
59
|
|
|
55
60
|
</div>
|
|
@@ -76,17 +81,24 @@
|
|
|
76
81
|
<div class="chai-flex chai-justify-center chai-gap-20 chai-flex-wrap">
|
|
77
82
|
|
|
78
83
|
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
79
|
-
<h3 class="chai-fw-bold chai-mb-10"
|
|
84
|
+
<h3 class="chai-fw-bold chai-mb-10"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightning-charge" viewBox="0 0 16 16">
|
|
85
|
+
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41z"/>
|
|
86
|
+
</svg> Fast</h3>
|
|
80
87
|
<p class="chai-text-muted">Only generates what you use.</p>
|
|
81
88
|
</div>
|
|
82
89
|
|
|
83
90
|
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
84
|
-
<h3 class="chai-fw-bold chai-mb-10"
|
|
91
|
+
<h3 class="chai-fw-bold chai-mb-10"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-arms-up" viewBox="0 0 16 16">
|
|
92
|
+
<path d="M8 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
|
|
93
|
+
<path d="m5.93 6.704-.846 8.451a.768.768 0 0 0 1.523.203l.81-4.865a.59.59 0 0 1 1.165 0l.81 4.865a.768.768 0 0 0 1.523-.203l-.845-8.451A1.5 1.5 0 0 1 10.5 5.5L13 2.284a.796.796 0 0 0-1.239-.998L9.634 3.84a.7.7 0 0 1-.33.235c-.23.074-.665.176-1.304.176-.64 0-1.074-.102-1.305-.176a.7.7 0 0 1-.329-.235L4.239 1.286a.796.796 0 0 0-1.24.998l2.5 3.216c.317.316.475.758.43 1.204Z"/>
|
|
94
|
+
</svg> Smart</h3>
|
|
85
95
|
<p class="chai-text-muted">Plugin-based and extensible.</p>
|
|
86
96
|
</div>
|
|
87
97
|
|
|
88
98
|
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
89
|
-
<h3 class="chai-fw-bold chai-mb-10"
|
|
99
|
+
<h3 class="chai-fw-bold chai-mb-10"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brilliance" viewBox="0 0 16 16">
|
|
100
|
+
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16M1 8a7 7 0 0 0 7 7 3.5 3.5 0 1 0 0-7 3.5 3.5 0 1 1 0-7 7 7 0 0 0-7 7"/>
|
|
101
|
+
</svg> Simple</h3>
|
|
90
102
|
<p class="chai-text-muted">Write UI directly in HTML.</p>
|
|
91
103
|
</div>
|
|
92
104
|
|
|
@@ -177,7 +189,7 @@
|
|
|
177
189
|
</h2>
|
|
178
190
|
|
|
179
191
|
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
180
|
-
Get Started
|
|
192
|
+
<a href="https://www.npmjs.com/package/chai-tailwind-engine" class="chai-a" target="_blank">Get Started</a>
|
|
181
193
|
</button>
|
|
182
194
|
|
|
183
195
|
</section>
|