create-chai-tailwind-app 1.0.2 → 1.0.3
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/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
|
+
|