create-chai-tailwind-app 1.0.1 → 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/template/index.html +45 -33
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
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<link rel="stylesheet" href="./dist/chai.css">
|
|
6
6
|
</head>
|
|
7
7
|
|
|
8
|
-
<body class="
|
|
8
|
+
<body class="chai-bg-gray-100 chai-dark-bg-gray-900 chai-text-gray-900 chai-dark-text-white">
|
|
9
9
|
|
|
10
10
|
<!-- NAVBAR -->
|
|
11
11
|
<header class="chai-flex chai-justify-between chai-items-center chai-p-20 chai-glass">
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
<h2 class="chai-fw-bold chai-fs-24">☕ ChaiTailwind</h2>
|
|
14
14
|
|
|
15
15
|
<div class="chai-flex chai-gap-10">
|
|
16
|
-
<button class="chai-btn
|
|
16
|
+
<button class="chai-btn">
|
|
17
17
|
Docs
|
|
18
18
|
</button>
|
|
19
19
|
|
|
20
|
-
<button class="chai-btn chai-bg-blue-500 chai-text-white">
|
|
20
|
+
<button onclick="toggleDark()" class="chai-btn chai-bg-blue-500 chai-text-white">
|
|
21
21
|
🌙
|
|
22
22
|
</button>
|
|
23
23
|
</div>
|
|
@@ -25,30 +25,30 @@
|
|
|
25
25
|
</header>
|
|
26
26
|
|
|
27
27
|
<!-- HERO -->
|
|
28
|
-
<section class="chai-flex chai-items-center chai-justify-center chai-min-h-400 chai-bg-gradient-
|
|
28
|
+
<section class="chai-flex chai-items-center chai-justify-center chai-min-h-400 chai-bg-gradient-dark-indigo">
|
|
29
29
|
|
|
30
30
|
<div class="chai-hero-content chai-text-center chai-max-w-800 chai-mx-auto chai-p-20">
|
|
31
31
|
|
|
32
|
-
<p class="chai-text-
|
|
32
|
+
<p class="chai-text-white chai-mb-10">
|
|
33
33
|
Lightweight CSS Engine
|
|
34
34
|
</p>
|
|
35
35
|
|
|
36
|
-
<h1 class="chai-fw-bold chai-text-white chai-mb-20" style="font-size: 40px;
|
|
36
|
+
<h1 class="chai-fw-bold chai-text-white chai-mb-20" style="font-size: 40px;">
|
|
37
37
|
Build beautiful UI<br>
|
|
38
38
|
without writing CSS
|
|
39
39
|
</h1>
|
|
40
40
|
|
|
41
|
-
<p class="chai-text-
|
|
41
|
+
<p class="chai-text-white chai-mb-20">
|
|
42
42
|
A modern utility-first engine powered by JavaScript.
|
|
43
43
|
</p>
|
|
44
44
|
|
|
45
45
|
<div class="chai-flex chai-justify-center chai-gap-10">
|
|
46
46
|
|
|
47
|
-
<button class="chai-btn chai-bg-gray-800 chai-text-white chai-shadow-premium">
|
|
47
|
+
<button class="chai-btn chai-bg-white chai-dark-bg-gray-800 chai-text-gray-900 chai-dark-text-white chai-shadow-premium">
|
|
48
48
|
Get Started
|
|
49
49
|
</button>
|
|
50
50
|
|
|
51
|
-
<button class="chai-btn chai-bg-blue-500 chai-text-white chai-shadow-premium">
|
|
51
|
+
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
52
52
|
GitHub
|
|
53
53
|
</button>
|
|
54
54
|
|
|
@@ -75,17 +75,17 @@
|
|
|
75
75
|
|
|
76
76
|
<div class="chai-flex chai-justify-center chai-gap-20 chai-flex-wrap">
|
|
77
77
|
|
|
78
|
-
<div class="chai-w-250 chai-p-20 chai-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
78
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
79
79
|
<h3 class="chai-fw-bold chai-mb-10">⚡ Fast</h3>
|
|
80
80
|
<p class="chai-text-muted">Only generates what you use.</p>
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
|
-
<div class="chai-w-250 chai-p-20 chai-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
83
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
84
84
|
<h3 class="chai-fw-bold chai-mb-10">🧠 Smart</h3>
|
|
85
85
|
<p class="chai-text-muted">Plugin-based and extensible.</p>
|
|
86
86
|
</div>
|
|
87
87
|
|
|
88
|
-
<div class="chai-w-250 chai-p-20 chai-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
88
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
89
89
|
<h3 class="chai-fw-bold chai-mb-10">🎯 Simple</h3>
|
|
90
90
|
<p class="chai-text-muted">Write UI directly in HTML.</p>
|
|
91
91
|
</div>
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
</section>
|
|
96
96
|
|
|
97
97
|
<!-- SIMPLE TO USE -->
|
|
98
|
-
<section class="chai-p-40 chai-bg-gray-800">
|
|
98
|
+
<section class="chai-p-40 chai-bg-gray-50 chai-dark-bg-gray-800">
|
|
99
99
|
|
|
100
100
|
<div class="chai-max-w-900 chai-mx-auto">
|
|
101
101
|
|
|
@@ -106,53 +106,59 @@
|
|
|
106
106
|
<div class="chai-flex chai-flex-wrap chai-gap-20 chai-justify-center">
|
|
107
107
|
|
|
108
108
|
<!-- BUTTON -->
|
|
109
|
-
<div class="chai-w-300 chai-p-20 chai-bg-gray-900 chai-rounded-10">
|
|
110
|
-
<p class="chai-mb-10 chai-text-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<div class="chai-bg-blue-500 chai-text-white">
|
|
114
|
-
</div>
|
|
109
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
110
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
111
|
+
Button
|
|
112
|
+
</p>
|
|
115
113
|
|
|
116
114
|
<div class="chai-flex chai-justify-center">
|
|
117
|
-
<div class="chai-bg-blue-500 chai-text-white chai-p-10 chai-rounded-10 chai-hover-bg-blue-600">
|
|
115
|
+
<div class="chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-p-10 chai-rounded-10 chai-hover-bg-blue-600">
|
|
118
116
|
Click Me
|
|
119
117
|
</div>
|
|
120
118
|
</div>
|
|
121
119
|
</div>
|
|
122
120
|
|
|
123
121
|
<!-- CARD -->
|
|
124
|
-
<div class="chai-w-300 chai-p-20 chai-bg-gray-900 chai-rounded-10">
|
|
125
|
-
<p class="chai-mb-10 chai-text-
|
|
122
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
123
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
124
|
+
Card
|
|
125
|
+
</p>
|
|
126
126
|
|
|
127
|
-
<div class="chai-bg-gray-800 chai-p-20 chai-rounded-10 chai-shadow-soft">
|
|
127
|
+
<div class="chai-bg-gray-100 chai-dark-bg-gray-800 chai-p-20 chai-rounded-10 chai-shadow-soft">
|
|
128
128
|
Card UI
|
|
129
129
|
</div>
|
|
130
130
|
</div>
|
|
131
131
|
|
|
132
132
|
<!-- FLEX -->
|
|
133
|
-
<div class="chai-w-300 chai-p-20 chai-bg-gray-900 chai-rounded-10">
|
|
134
|
-
<p class="chai-mb-10 chai-text-
|
|
133
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
134
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
135
|
+
Flex
|
|
136
|
+
</p>
|
|
135
137
|
|
|
136
|
-
<div class="chai-flex chai-justify-between chai-bg-gray-800 chai-p-10 chai-rounded-10">
|
|
138
|
+
<div class="chai-flex chai-justify-between chai-bg-gray-100 chai-dark-bg-gray-800 chai-p-10 chai-rounded-10">
|
|
137
139
|
<span>Left</span>
|
|
138
140
|
<span>Right</span>
|
|
139
141
|
</div>
|
|
140
142
|
</div>
|
|
141
143
|
|
|
142
144
|
<!-- GRADIENT -->
|
|
143
|
-
<div class="chai-w-300 chai-p-20 chai-bg-gray-900 chai-rounded-10">
|
|
144
|
-
<p class="chai-mb-10 chai-text-
|
|
145
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
146
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
147
|
+
Gradient
|
|
148
|
+
</p>
|
|
145
149
|
|
|
146
|
-
<div class="chai-bg-gradient-
|
|
150
|
+
<div class="chai-bg-gradient-green-400-blue-500 chai-text-white chai-p-20 chai-rounded-10 chai-text-center">
|
|
147
151
|
Gradient Box
|
|
148
152
|
</div>
|
|
149
153
|
</div>
|
|
150
154
|
|
|
151
155
|
<!-- DARK -->
|
|
152
|
-
<div class="chai-w-300 chai-p-20 chai-bg-gray-900 chai-rounded-10">
|
|
153
|
-
<p class="chai-mb-10 chai-text-
|
|
156
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
157
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
158
|
+
Dark UI
|
|
159
|
+
</p>
|
|
154
160
|
|
|
155
|
-
<div class="chai-bg-gray-800 chai-text-white chai-p-20 chai-rounded-10">
|
|
161
|
+
<div class="chai-bg-gray-100 chai-dark-bg-gray-800 chai-text-gray-900 chai-dark-text-white chai-p-20 chai-rounded-10">
|
|
156
162
|
Dark Mode Ready
|
|
157
163
|
</div>
|
|
158
164
|
</div>
|
|
@@ -170,11 +176,17 @@
|
|
|
170
176
|
Start building today
|
|
171
177
|
</h2>
|
|
172
178
|
|
|
173
|
-
<button class="chai-btn chai-bg-blue-500 chai-text-white chai-shadow-premium">
|
|
179
|
+
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
174
180
|
Get Started
|
|
175
181
|
</button>
|
|
176
182
|
|
|
177
183
|
</section>
|
|
178
184
|
|
|
185
|
+
<script>
|
|
186
|
+
function toggleDark() {
|
|
187
|
+
document.documentElement.classList.toggle("dark");
|
|
188
|
+
}
|
|
189
|
+
</script>
|
|
190
|
+
|
|
179
191
|
</body>
|
|
180
192
|
</html>
|