create-chai-tailwind-app 1.0.1 → 1.0.2

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/package.json +1 -1
  2. package/template/index.html +45 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-chai-tailwind-app",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "create-chai-app": "./bin/index.js"
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="dark chai-bg-gray-900 chai-text-white">
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 chai-text-white">
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-hero">
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-muted chai-mb-10">
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; line-height: 1.2;">
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-muted chai-mb-20">
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-muted">Button</p>
111
-
112
- <div class="chai-mb-10 chai-text-muted">
113
- &lt;div class="chai-bg-blue-500 chai-text-white"&gt;
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-muted">Card</p>
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-muted">Flex</p>
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-muted">Gradient</p>
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-hero chai-text-white chai-p-20 chai-rounded-10 chai-text-center">
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-muted">Dark UI</p>
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>