chai-tailwind-js 1.0.0 → 1.0.1
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 +219 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# ChaiTailwind
|
|
2
|
+
|
|
3
|
+
A lightweight, custom Tailwind-like utility engine built from scratch using JavaScript.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## About the Project
|
|
8
|
+
|
|
9
|
+
ChaiTailwind is a utility-first styling engine that mimics the core idea of Tailwind CSS. Instead of pre-generated CSS, it parses class names and dynamically applies styles to DOM elements at runtime.
|
|
10
|
+
|
|
11
|
+
This project was built to understand:
|
|
12
|
+
- DOM traversal
|
|
13
|
+
- Class parsing
|
|
14
|
+
- Dynamic styling
|
|
15
|
+
- Pipeline architecture
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Internal Architecture
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
Pipeline:
|
|
24
|
+
|
|
25
|
+
Scanner → Styler → Interpreter → Parser → Handler → DOM Update
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Flow Explanation
|
|
30
|
+
|
|
31
|
+
- **Scanner**
|
|
32
|
+
- Returns a NodeList of elements containing class attributes
|
|
33
|
+
|
|
34
|
+
- **Styler**
|
|
35
|
+
- Extracts relevant class names from the NodeList
|
|
36
|
+
|
|
37
|
+
- **Interpreter**
|
|
38
|
+
- Acts as the central controller
|
|
39
|
+
- Sends classes to the parser and handler
|
|
40
|
+
|
|
41
|
+
- **Parser**
|
|
42
|
+
- Converts class strings into structured data
|
|
43
|
+
- Example:
|
|
44
|
+
```
|
|
45
|
+
chai-p-2 → { prefix: "p", value: "2" }
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
- **Handler**
|
|
49
|
+
- Applies computed styles to DOM elements
|
|
50
|
+
|
|
51
|
+
- **DOM Update**
|
|
52
|
+
- Final styles are reflected in the UI
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Demo
|
|
57
|
+
|
|
58
|
+
A demo is included in the project.
|
|
59
|
+
|
|
60
|
+
### Option 1: Using VS Code Live Server (Recommended)
|
|
61
|
+
|
|
62
|
+
1. Install the "Live Server" extension in VS Code
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
2. Open index.html
|
|
67
|
+
3. Click "Go Live" as shown in figure
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### Option 2: Using Node.js
|
|
74
|
+
|
|
75
|
+
Make sure Node.js is installed, then run:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
git clone <your-repo-url>
|
|
79
|
+
cd chai-tailwind
|
|
80
|
+
npx http-server
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
## Available Utilities
|
|
85
|
+
|
|
86
|
+
Below are the currently supported utility classes in ChaiTailwind.
|
|
87
|
+
|
|
88
|
+
### Background Colors
|
|
89
|
+
|
|
90
|
+
| Class | Value |
|
|
91
|
+
| ------------------ | ------- |
|
|
92
|
+
| chai-bg-red-100 | #fee2e2 |
|
|
93
|
+
| chai-bg-red-300 | #fca5a5 |
|
|
94
|
+
| chai-bg-red-500 | #ef4444 |
|
|
95
|
+
| chai-bg-red-700 | #b91c1c |
|
|
96
|
+
| chai-bg-blue-100 | #dbeafe |
|
|
97
|
+
| chai-bg-blue-300 | #93c5fd |
|
|
98
|
+
| chai-bg-blue-500 | #3b82f6 |
|
|
99
|
+
| chai-bg-blue-700 | #1d4ed8 |
|
|
100
|
+
| chai-bg-green-500 | #22c55e |
|
|
101
|
+
| chai-bg-yellow-500 | #eab308 |
|
|
102
|
+
| chai-bg-purple-500 | #a855f7 |
|
|
103
|
+
| chai-bg-pink-500 | #ec4899 |
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
### Text Colors
|
|
108
|
+
|
|
109
|
+
| Class | Value |
|
|
110
|
+
| -------------------- | ------- |
|
|
111
|
+
| chai-text-black | black |
|
|
112
|
+
| chai-text-white | white |
|
|
113
|
+
| chai-text-red-500 | #ef4444 |
|
|
114
|
+
| chai-text-blue-500 | #3b82f6 |
|
|
115
|
+
| chai-text-green-500 | #22c55e |
|
|
116
|
+
| chai-text-yellow-500 | #eab308 |
|
|
117
|
+
| chai-text-purple-500 | #a855f7 |
|
|
118
|
+
| chai-text-pink-500 | #ec4899 |
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
### Font Sizes
|
|
123
|
+
|
|
124
|
+
| Class | Value |
|
|
125
|
+
| -------------- | ----- |
|
|
126
|
+
| chai-text-xs | 12px |
|
|
127
|
+
| chai-text-sm | 14px |
|
|
128
|
+
| chai-text-base | 16px |
|
|
129
|
+
| chai-text-lg | 18px |
|
|
130
|
+
| chai-text-xl | 20px |
|
|
131
|
+
| chai-text-2xl | 24px |
|
|
132
|
+
| chai-text-3xl | 28px |
|
|
133
|
+
| chai-text-4xl | 32px |
|
|
134
|
+
| chai-text-5xl | 40px |
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
### Padding
|
|
139
|
+
|
|
140
|
+
| Class | Value |
|
|
141
|
+
| --------- | ----- |
|
|
142
|
+
| chai-p-0 | 0px |
|
|
143
|
+
| chai-p-2 | 8px |
|
|
144
|
+
| chai-p-4 | 16px |
|
|
145
|
+
| chai-p-8 | 32px |
|
|
146
|
+
| chai-p-12 | 48px |
|
|
147
|
+
| chai-p-16 | 64px |
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### Margin
|
|
152
|
+
|
|
153
|
+
| Class | Value |
|
|
154
|
+
| --------- | ----- |
|
|
155
|
+
| chai-m-0 | 0px |
|
|
156
|
+
| chai-m-2 | 8px |
|
|
157
|
+
| chai-m-4 | 16px |
|
|
158
|
+
| chai-m-8 | 32px |
|
|
159
|
+
| chai-m-12 | 48px |
|
|
160
|
+
| chai-m-16 | 64px |
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
### Border Radius
|
|
165
|
+
|
|
166
|
+
| Class | Value |
|
|
167
|
+
| ----------------- | ------ |
|
|
168
|
+
| chai-rounded-none | 0px |
|
|
169
|
+
| chai-rounded-sm | 4px |
|
|
170
|
+
| chai-rounded | 8px |
|
|
171
|
+
| chai-rounded-md | 10px |
|
|
172
|
+
| chai-rounded-lg | 12px |
|
|
173
|
+
| chai-rounded-xl | 16px |
|
|
174
|
+
| chai-rounded-full | 9999px |
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
### Shadows
|
|
179
|
+
|
|
180
|
+
| Class | Value |
|
|
181
|
+
| -------------- | --------------------------- |
|
|
182
|
+
| chai-shadow-sm | 0 1px 3px rgba(0,0,0,0.1) |
|
|
183
|
+
| chai-shadow | 0 4px 10px rgba(0,0,0,0.1) |
|
|
184
|
+
| chai-shadow-md | 0 6px 20px rgba(0,0,0,0.15) |
|
|
185
|
+
| chai-shadow-lg | 0 10px 30px rgba(0,0,0,0.2) |
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
### Flexbox
|
|
190
|
+
|
|
191
|
+
| Class | Description |
|
|
192
|
+
| -------------------- | ------------------------------ |
|
|
193
|
+
| chai-flex | display: flex |
|
|
194
|
+
| chai-flex-row | flex-direction: row |
|
|
195
|
+
| chai-flex-col | flex-direction: column |
|
|
196
|
+
| chai-justify-start | justify-content: flex-start |
|
|
197
|
+
| chai-justify-center | justify-content: center |
|
|
198
|
+
| chai-justify-end | justify-content: flex-end |
|
|
199
|
+
| chai-justify-between | justify-content: space-between |
|
|
200
|
+
| chai-justify-around | justify-content: space-around |
|
|
201
|
+
| chai-justify-evenly | justify-content: space-evenly |
|
|
202
|
+
| chai-items-start | align-items: flex-start |
|
|
203
|
+
| chai-items-center | align-items: center |
|
|
204
|
+
| chai-items-end | align-items: flex-end |
|
|
205
|
+
| chai-items-stretch | align-items: stretch |
|
|
206
|
+
| chai-items-baseline | align-items: baseline |
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
### Hover Support
|
|
211
|
+
|
|
212
|
+
```
|
|
213
|
+
hover:chai-bg-red-500
|
|
214
|
+
hover:chai-text-blue-300
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
Note: Hover currently works with background color utilities only.
|
|
219
|
+
|
package/package.json
CHANGED