1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
|
package tuigen
type TailwindClassInfo struct {
Name string
Category string
Description string
Example string
}
func AllTailwindClasses() []TailwindClassInfo {
var classes []TailwindClassInfo
layoutClasses := []TailwindClassInfo{
{Name: "block", Category: "layout", Description: "Display block (column direction, fills parent width)", Example: `<div class="block">`},
{Name: "flex", Category: "layout", Description: "Display flex row", Example: `<div class="flex">`},
{Name: "flex-row", Category: "layout", Description: "Display flex row", Example: `<div class="flex-row">`},
{Name: "flex-col", Category: "layout", Description: "Display flex column", Example: `<div class="flex-col">`},
}
classes = append(classes, layoutClasses...)
flexClasses := []TailwindClassInfo{
{Name: "flex-grow", Category: "flex", Description: "Allow element to grow", Example: `<div class="flex-grow">`},
{Name: "flex-shrink", Category: "flex", Description: "Allow element to shrink", Example: `<div class="flex-shrink">`},
{Name: "flex-grow-0", Category: "flex", Description: "Prevent element from growing", Example: `<div class="flex-grow-0">`},
{Name: "flex-shrink-0", Category: "flex", Description: "Prevent element from shrinking", Example: `<div class="flex-shrink-0">`},
}
classes = append(classes, flexClasses...)
justifyClasses := []TailwindClassInfo{
{Name: "justify-start", Category: "flex", Description: "Justify content to start", Example: `<div class="flex justify-start">`},
{Name: "justify-center", Category: "flex", Description: "Justify content to center", Example: `<div class="flex justify-center">`},
{Name: "justify-end", Category: "flex", Description: "Justify content to end", Example: `<div class="flex justify-end">`},
{Name: "justify-between", Category: "flex", Description: "Space between items", Example: `<div class="flex justify-between">`},
{Name: "justify-around", Category: "flex", Description: "Space around items", Example: `<div class="flex justify-around">`},
{Name: "justify-evenly", Category: "flex", Description: "Space evenly between items", Example: `<div class="flex justify-evenly">`},
}
classes = append(classes, justifyClasses...)
alignClasses := []TailwindClassInfo{
{Name: "items-start", Category: "flex", Description: "Align items to start", Example: `<div class="flex items-start">`},
{Name: "items-center", Category: "flex", Description: "Align items to center", Example: `<div class="flex items-center">`},
{Name: "items-end", Category: "flex", Description: "Align items to end", Example: `<div class="flex items-end">`},
{Name: "items-stretch", Category: "flex", Description: "Stretch items to fill", Example: `<div class="flex items-stretch">`},
}
classes = append(classes, alignClasses...)
selfClasses := []TailwindClassInfo{
{Name: "self-start", Category: "flex", Description: "Align self to start", Example: `<div class="self-start">`},
{Name: "self-center", Category: "flex", Description: "Align self to center", Example: `<div class="self-center">`},
{Name: "self-end", Category: "flex", Description: "Align self to end", Example: `<div class="self-end">`},
{Name: "self-stretch", Category: "flex", Description: "Stretch self to fill", Example: `<div class="self-stretch">`},
}
classes = append(classes, selfClasses...)
wrapClasses := []TailwindClassInfo{
{Name: "flex-wrap", Category: "flex", Description: "Allow flex items to wrap to new lines", Example: `<div class="flex flex-wrap">`},
{Name: "flex-wrap-reverse", Category: "flex", Description: "Wrap flex items in reverse cross-axis order", Example: `<div class="flex flex-wrap-reverse">`},
{Name: "flex-nowrap", Category: "flex", Description: "Prevent flex items from wrapping (default)", Example: `<div class="flex flex-nowrap">`},
}
classes = append(classes, wrapClasses...)
contentClasses := []TailwindClassInfo{
{Name: "content-start", Category: "flex", Description: "Pack flex lines at start of cross axis", Example: `<div class="flex flex-wrap content-start">`},
{Name: "content-end", Category: "flex", Description: "Pack flex lines at end of cross axis", Example: `<div class="flex flex-wrap content-end">`},
{Name: "content-center", Category: "flex", Description: "Center flex lines on cross axis", Example: `<div class="flex flex-wrap content-center">`},
{Name: "content-stretch", Category: "flex", Description: "Stretch flex lines to fill cross axis", Example: `<div class="flex flex-wrap content-stretch">`},
{Name: "content-between", Category: "flex", Description: "Even space between flex lines", Example: `<div class="flex flex-wrap content-between">`},
{Name: "content-around", Category: "flex", Description: "Even space around flex lines", Example: `<div class="flex flex-wrap content-around">`},
}
classes = append(classes, contentClasses...)
gapClasses := []TailwindClassInfo{
{Name: "gap-1", Category: "spacing", Description: "Gap of 1 character", Example: `<div class="flex gap-1">`},
{Name: "gap-2", Category: "spacing", Description: "Gap of 2 characters", Example: `<div class="flex gap-2">`},
{Name: "gap-3", Category: "spacing", Description: "Gap of 3 characters", Example: `<div class="flex gap-3">`},
{Name: "gap-4", Category: "spacing", Description: "Gap of 4 characters", Example: `<div class="flex gap-4">`},
}
classes = append(classes, gapClasses...)
paddingClasses := []TailwindClassInfo{
{Name: "p-1", Category: "spacing", Description: "Padding of 1 on all sides", Example: `<div class="p-1">`},
{Name: "p-2", Category: "spacing", Description: "Padding of 2 on all sides", Example: `<div class="p-2">`},
{Name: "p-3", Category: "spacing", Description: "Padding of 3 on all sides", Example: `<div class="p-3">`},
{Name: "p-4", Category: "spacing", Description: "Padding of 4 on all sides", Example: `<div class="p-4">`},
{Name: "px-1", Category: "spacing", Description: "Horizontal padding of 1", Example: `<div class="px-1">`},
{Name: "px-2", Category: "spacing", Description: "Horizontal padding of 2", Example: `<div class="px-2">`},
{Name: "py-1", Category: "spacing", Description: "Vertical padding of 1", Example: `<div class="py-1">`},
{Name: "py-2", Category: "spacing", Description: "Vertical padding of 2", Example: `<div class="py-2">`},
{Name: "pt-1", Category: "spacing", Description: "Top padding of 1", Example: `<div class="pt-1">`},
{Name: "pt-2", Category: "spacing", Description: "Top padding of 2", Example: `<div class="pt-2">`},
{Name: "pr-1", Category: "spacing", Description: "Right padding of 1", Example: `<div class="pr-1">`},
{Name: "pr-2", Category: "spacing", Description: "Right padding of 2", Example: `<div class="pr-2">`},
{Name: "pb-1", Category: "spacing", Description: "Bottom padding of 1", Example: `<div class="pb-1">`},
{Name: "pb-2", Category: "spacing", Description: "Bottom padding of 2", Example: `<div class="pb-2">`},
{Name: "pl-1", Category: "spacing", Description: "Left padding of 1", Example: `<div class="pl-1">`},
{Name: "pl-2", Category: "spacing", Description: "Left padding of 2", Example: `<div class="pl-2">`},
}
classes = append(classes, paddingClasses...)
marginClasses := []TailwindClassInfo{
{Name: "m-1", Category: "spacing", Description: "Margin of 1 on all sides", Example: `<div class="m-1">`},
{Name: "m-2", Category: "spacing", Description: "Margin of 2 on all sides", Example: `<div class="m-2">`},
{Name: "m-3", Category: "spacing", Description: "Margin of 3 on all sides", Example: `<div class="m-3">`},
{Name: "m-4", Category: "spacing", Description: "Margin of 4 on all sides", Example: `<div class="m-4">`},
{Name: "mx-1", Category: "spacing", Description: "Horizontal margin of 1", Example: `<div class="mx-1">`},
{Name: "mx-2", Category: "spacing", Description: "Horizontal margin of 2", Example: `<div class="mx-2">`},
{Name: "my-1", Category: "spacing", Description: "Vertical margin of 1", Example: `<div class="my-1">`},
{Name: "my-2", Category: "spacing", Description: "Vertical margin of 2", Example: `<div class="my-2">`},
{Name: "mt-1", Category: "spacing", Description: "Top margin of 1", Example: `<div class="mt-1">`},
{Name: "mt-2", Category: "spacing", Description: "Top margin of 2", Example: `<div class="mt-2">`},
{Name: "mr-1", Category: "spacing", Description: "Right margin of 1", Example: `<div class="mr-1">`},
{Name: "mr-2", Category: "spacing", Description: "Right margin of 2", Example: `<div class="mr-2">`},
{Name: "mb-1", Category: "spacing", Description: "Bottom margin of 1", Example: `<div class="mb-1">`},
{Name: "mb-2", Category: "spacing", Description: "Bottom margin of 2", Example: `<div class="mb-2">`},
{Name: "ml-1", Category: "spacing", Description: "Left margin of 1", Example: `<div class="ml-1">`},
{Name: "ml-2", Category: "spacing", Description: "Left margin of 2", Example: `<div class="ml-2">`},
}
classes = append(classes, marginClasses...)
widthClasses := []TailwindClassInfo{
{Name: "w-full", Category: "layout", Description: "Full width (100%)", Example: `<div class="w-full">`},
{Name: "w-auto", Category: "layout", Description: "Auto width (size to content)", Example: `<div class="w-auto">`},
{Name: "w-1/2", Category: "layout", Description: "Half width (50%)", Example: `<div class="w-1/2">`},
{Name: "w-1/3", Category: "layout", Description: "One-third width (33%)", Example: `<div class="w-1/3">`},
{Name: "w-2/3", Category: "layout", Description: "Two-thirds width (67%)", Example: `<div class="w-2/3">`},
{Name: "w-1/4", Category: "layout", Description: "Quarter width (25%)", Example: `<div class="w-1/4">`},
{Name: "w-3/4", Category: "layout", Description: "Three-quarters width (75%)", Example: `<div class="w-3/4">`},
}
classes = append(classes, widthClasses...)
heightClasses := []TailwindClassInfo{
{Name: "h-full", Category: "layout", Description: "Full height (100%)", Example: `<div class="h-full">`},
{Name: "h-auto", Category: "layout", Description: "Auto height (size to content)", Example: `<div class="h-auto">`},
{Name: "h-1/2", Category: "layout", Description: "Half height (50%)", Example: `<div class="h-1/2">`},
{Name: "h-1/3", Category: "layout", Description: "One-third height (33%)", Example: `<div class="h-1/3">`},
{Name: "h-2/3", Category: "layout", Description: "Two-thirds height (67%)", Example: `<div class="h-2/3">`},
{Name: "h-1/4", Category: "layout", Description: "Quarter height (25%)", Example: `<div class="h-1/4">`},
{Name: "h-3/4", Category: "layout", Description: "Three-quarters height (75%)", Example: `<div class="h-3/4">`},
}
classes = append(classes, heightClasses...)
borderClasses := []TailwindClassInfo{
{Name: "border", Category: "visual", Description: "Single line border", Example: `<div class="border">`},
{Name: "border-rounded", Category: "visual", Description: "Rounded border", Example: `<div class="border-rounded">`},
{Name: "border-double", Category: "visual", Description: "Double line border", Example: `<div class="border-double">`},
{Name: "border-thick", Category: "visual", Description: "Thick border", Example: `<div class="border-thick">`},
{Name: "border-red", Category: "visual", Description: "Red border color", Example: `<div class="border border-red">`},
{Name: "border-green", Category: "visual", Description: "Green border color", Example: `<div class="border border-green">`},
{Name: "border-blue", Category: "visual", Description: "Blue border color", Example: `<div class="border border-blue">`},
{Name: "border-cyan", Category: "visual", Description: "Cyan border color", Example: `<div class="border border-cyan">`},
{Name: "border-magenta", Category: "visual", Description: "Magenta border color", Example: `<div class="border border-magenta">`},
{Name: "border-yellow", Category: "visual", Description: "Yellow border color", Example: `<div class="border border-yellow">`},
{Name: "border-white", Category: "visual", Description: "White border color", Example: `<div class="border border-white">`},
{Name: "border-black", Category: "visual", Description: "Black border color", Example: `<div class="border border-black">`},
}
classes = append(classes, borderClasses...)
typographyClasses := []TailwindClassInfo{
{Name: "font-bold", Category: "typography", Description: "Bold text", Example: `<span class="font-bold">Bold</span>`},
{Name: "font-dim", Category: "typography", Description: "Dim/faint text", Example: `<span class="font-dim">Dim</span>`},
{Name: "italic", Category: "typography", Description: "Italic text", Example: `<span class="italic">Italic</span>`},
{Name: "underline", Category: "typography", Description: "Underlined text", Example: `<span class="underline">Underlined</span>`},
{Name: "strikethrough", Category: "typography", Description: "Strikethrough text", Example: `<span class="strikethrough">Strikethrough</span>`},
{Name: "text-left", Category: "typography", Description: "Align text left", Example: `<div class="text-left">`},
{Name: "text-center", Category: "typography", Description: "Center text", Example: `<div class="text-center">`},
{Name: "text-right", Category: "typography", Description: "Align text right", Example: `<div class="text-right">`},
}
classes = append(classes, typographyClasses...)
textColorClasses := []TailwindClassInfo{
{Name: "text-red", Category: "visual", Description: "Red text color", Example: `<span class="text-red">Red</span>`},
{Name: "text-green", Category: "visual", Description: "Green text color", Example: `<span class="text-green">Green</span>`},
{Name: "text-blue", Category: "visual", Description: "Blue text color", Example: `<span class="text-blue">Blue</span>`},
{Name: "text-cyan", Category: "visual", Description: "Cyan text color", Example: `<span class="text-cyan">Cyan</span>`},
{Name: "text-magenta", Category: "visual", Description: "Magenta text color", Example: `<span class="text-magenta">Magenta</span>`},
{Name: "text-yellow", Category: "visual", Description: "Yellow text color", Example: `<span class="text-yellow">Yellow</span>`},
{Name: "text-white", Category: "visual", Description: "White text color", Example: `<span class="text-white">White</span>`},
{Name: "text-black", Category: "visual", Description: "Black text color", Example: `<span class="text-black">Black</span>`},
{Name: "text-bright-red", Category: "visual", Description: "Bright red text color", Example: `<span class="text-bright-red">Bright Red</span>`},
{Name: "text-bright-green", Category: "visual", Description: "Bright green text color", Example: `<span class="text-bright-green">Bright Green</span>`},
{Name: "text-bright-blue", Category: "visual", Description: "Bright blue text color", Example: `<span class="text-bright-blue">Bright Blue</span>`},
{Name: "text-bright-cyan", Category: "visual", Description: "Bright cyan text color", Example: `<span class="text-bright-cyan">Bright Cyan</span>`},
{Name: "text-bright-magenta", Category: "visual", Description: "Bright magenta text color", Example: `<span class="text-bright-magenta">Bright Magenta</span>`},
{Name: "text-bright-yellow", Category: "visual", Description: "Bright yellow text color", Example: `<span class="text-bright-yellow">Bright Yellow</span>`},
{Name: "text-bright-white", Category: "visual", Description: "Bright white text color", Example: `<span class="text-bright-white">Bright White</span>`},
{Name: "text-bright-black", Category: "visual", Description: "Bright black (gray) text color", Example: `<span class="text-bright-black">Gray</span>`},
}
classes = append(classes, textColorClasses...)
bgColorClasses := []TailwindClassInfo{
{Name: "bg-red", Category: "visual", Description: "Red background", Example: `<div class="bg-red">`},
{Name: "bg-green", Category: "visual", Description: "Green background", Example: `<div class="bg-green">`},
{Name: "bg-blue", Category: "visual", Description: "Blue background", Example: `<div class="bg-blue">`},
{Name: "bg-cyan", Category: "visual", Description: "Cyan background", Example: `<div class="bg-cyan">`},
{Name: "bg-magenta", Category: "visual", Description: "Magenta background", Example: `<div class="bg-magenta">`},
{Name: "bg-yellow", Category: "visual", Description: "Yellow background", Example: `<div class="bg-yellow">`},
{Name: "bg-white", Category: "visual", Description: "White background", Example: `<div class="bg-white">`},
{Name: "bg-black", Category: "visual", Description: "Black background", Example: `<div class="bg-black">`},
{Name: "bg-bright-red", Category: "visual", Description: "Bright red background", Example: `<div class="bg-bright-red">`},
{Name: "bg-bright-green", Category: "visual", Description: "Bright green background", Example: `<div class="bg-bright-green">`},
{Name: "bg-bright-blue", Category: "visual", Description: "Bright blue background", Example: `<div class="bg-bright-blue">`},
{Name: "bg-bright-cyan", Category: "visual", Description: "Bright cyan background", Example: `<div class="bg-bright-cyan">`},
{Name: "bg-bright-magenta", Category: "visual", Description: "Bright magenta background", Example: `<div class="bg-bright-magenta">`},
{Name: "bg-bright-yellow", Category: "visual", Description: "Bright yellow background", Example: `<div class="bg-bright-yellow">`},
{Name: "bg-bright-white", Category: "visual", Description: "Bright white background", Example: `<div class="bg-bright-white">`},
{Name: "bg-bright-black", Category: "visual", Description: "Bright black (dark gray) background", Example: `<div class="bg-bright-black">`},
}
classes = append(classes, bgColorClasses...)
scrollClasses := []TailwindClassInfo{
{Name: "overflow-scroll", Category: "layout", Description: "Enable scrolling in both directions", Example: `<div class="overflow-scroll">`},
{Name: "overflow-y-scroll", Category: "layout", Description: "Enable vertical scrolling", Example: `<div class="overflow-y-scroll">`},
{Name: "overflow-x-scroll", Category: "layout", Description: "Enable horizontal scrolling", Example: `<div class="overflow-x-scroll">`},
}
classes = append(classes, scrollClasses...)
focusClasses := []TailwindClassInfo{
{Name: "focusable", Category: "layout", Description: "Make element focusable", Example: `<div class="focusable">`},
}
classes = append(classes, focusClasses...)
visibilityClasses := []TailwindClassInfo{
{Name: "hidden", Category: "layout", Description: "Hide element from layout and rendering", Example: `<div class="hidden">`},
}
classes = append(classes, visibilityClasses...)
overflowClasses := []TailwindClassInfo{
{Name: "overflow-hidden", Category: "layout", Description: "Clip children without scrollbars", Example: `<div class="overflow-hidden">`},
}
classes = append(classes, overflowClasses...)
truncateClasses := []TailwindClassInfo{
{Name: "truncate", Category: "typography", Description: "Truncate text with ellipsis on overflow", Example: `<span class="truncate w-20">Long text here...</span>`},
}
classes = append(classes, truncateClasses...)
hexColorClasses := []TailwindClassInfo{
{Name: "text-[#ff0000]", Category: "visual", Description: "Set text color to hex #ff0000", Example: `<span class="text-[#ff0000]">Red</span>`},
{Name: "bg-[#00ff00]", Category: "visual", Description: "Set background color to hex #00ff00", Example: `<div class="bg-[#00ff00]">`},
{Name: "border-[#0000ff]", Category: "visual", Description: "Set border color to hex #0000ff", Example: `<div class="border border-[#0000ff]">`},
}
classes = append(classes, hexColorClasses...)
scrollbarClasses := []TailwindClassInfo{
{Name: "scrollbar-hidden", Category: "visual", Description: "Hide scrollbar and reclaim its gutter width", Example: `<div class="overflow-y-scroll scrollbar-hidden">`},
{Name: "scrollbar-red", Category: "visual", Description: "Set scrollbar track color to red", Example: `<div class="overflow-y-scroll scrollbar-red">`},
{Name: "scrollbar-thumb-cyan", Category: "visual", Description: "Set scrollbar thumb color to cyan", Example: `<div class="overflow-y-scroll scrollbar-thumb-cyan">`},
{Name: "scrollbar-[#ff6600]", Category: "visual", Description: "Set scrollbar track color to hex", Example: `<div class="overflow-y-scroll scrollbar-[#ff6600]">`},
{Name: "scrollbar-thumb-[#ff6600]", Category: "visual", Description: "Set scrollbar thumb color to hex", Example: `<div class="overflow-y-scroll scrollbar-thumb-[#ff6600]">`},
}
classes = append(classes, scrollbarClasses...)
return classes
}
|