mancha 0.17.4 → 0.17.6
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/dist/browser.js +1 -1
- package/dist/css_gen_utils.d.ts +105 -2
- package/dist/css_gen_utils.js +62 -10
- package/dist/css_gen_utils.js.map +1 -1
- package/dist/mancha.js +1 -1
- package/docs/css.md +403 -236
- package/package.json +1 -1
- package/scripts/generate-css-docs.ts +178 -21
package/docs/css.md
CHANGED
|
@@ -7,7 +7,6 @@ Mancha provides a set of CSS utilities and basic styles to help you build your a
|
|
|
7
7
|
The basic CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectBasicCss()` or by adding `css="basic"` to your script tag.
|
|
8
8
|
|
|
9
9
|
### Reset & Defaults
|
|
10
|
-
|
|
11
10
|
- **Max Width**: 70ch (centered)
|
|
12
11
|
- **Padding**: 2em 1em
|
|
13
12
|
- **Line Height**: 1.75
|
|
@@ -22,16 +21,15 @@ The utility CSS rules are inspired by Tailwind CSS. You can inject them using `i
|
|
|
22
21
|
### Media Breakpoints
|
|
23
22
|
|
|
24
23
|
| Prefix | Min Width |
|
|
25
|
-
|
|
|
26
|
-
| `sm:`
|
|
27
|
-
| `md:`
|
|
28
|
-
| `lg:`
|
|
29
|
-
| `xl:`
|
|
24
|
+
| --- | --- |
|
|
25
|
+
| `sm:` | `640px` |
|
|
26
|
+
| `md:` | `768px` |
|
|
27
|
+
| `lg:` | `1024px` |
|
|
28
|
+
| `xl:` | `1280px` |
|
|
30
29
|
|
|
31
30
|
### Pseudo States
|
|
32
31
|
|
|
33
32
|
The following pseudo states are supported for all utilities:
|
|
34
|
-
|
|
35
33
|
- `hover:`
|
|
36
34
|
- `focus:`
|
|
37
35
|
- `disabled:`
|
|
@@ -41,269 +39,438 @@ The following pseudo states are supported for all utilities:
|
|
|
41
39
|
|
|
42
40
|
Spacing utilities use a 0.25rem (4px) unit by default.
|
|
43
41
|
|
|
44
|
-
| Prefix | Property
|
|
45
|
-
|
|
|
46
|
-
| `m-`
|
|
47
|
-
| `mx-`
|
|
48
|
-
| `my-`
|
|
49
|
-
| `mt-`
|
|
50
|
-
| `mb-`
|
|
51
|
-
| `ml-`
|
|
52
|
-
| `mr-`
|
|
53
|
-
| `p-`
|
|
54
|
-
| `px-`
|
|
55
|
-
| `py-`
|
|
56
|
-
| `pt-`
|
|
57
|
-
| `pb-`
|
|
58
|
-
| `pl-`
|
|
59
|
-
| `pr-`
|
|
42
|
+
| Prefix | Property | Values |
|
|
43
|
+
| --- | --- | --- |
|
|
44
|
+
| `m-` | `margin` | `0`, `0.25rem` - `128rem` (and negative versions) |
|
|
45
|
+
| `mx-` | `margin-left/right` | Same as above |
|
|
46
|
+
| `my-` | `margin-top/bottom` | Same as above |
|
|
47
|
+
| `mt-` | `margin-top` | Same as above |
|
|
48
|
+
| `mb-` | `margin-bottom` | Same as above |
|
|
49
|
+
| `ml-` | `margin-left` | Same as above |
|
|
50
|
+
| `mr-` | `margin-right` | Same as above |
|
|
51
|
+
| `p-` | `padding` | `0`, `0.25rem` - `128rem` (and negative versions) |
|
|
52
|
+
| `px-` | `padding-left/right` | Same as above |
|
|
53
|
+
| `py-` | `padding-top/bottom` | Same as above |
|
|
54
|
+
| `pt-` | `padding-top` | Same as above |
|
|
55
|
+
| `pb-` | `padding-bottom` | Same as above |
|
|
56
|
+
| `pl-` | `padding-left` | Same as above |
|
|
57
|
+
| `pr-` | `padding-right` | Same as above |
|
|
60
58
|
|
|
61
59
|
### Sizing (Width & Height)
|
|
62
60
|
|
|
63
|
-
| Prefix
|
|
64
|
-
|
|
|
65
|
-
| `w-`
|
|
66
|
-
| `w-dvw/dvh/svw/svh/lvw/lvh` | `width`
|
|
67
|
-
| `w-fit/min/max`
|
|
68
|
-
| `h-`
|
|
69
|
-
| `h-dvw/dvh/svw/svh/lvw/lvh` | `height`
|
|
70
|
-
| `h-fit/min/max`
|
|
71
|
-
| `min-w-`
|
|
72
|
-
| `min-h-`
|
|
73
|
-
| `max-w-`
|
|
74
|
-
| `max-h-`
|
|
75
|
-
| `size-`
|
|
61
|
+
| Prefix | Property | Values |
|
|
62
|
+
| --- | --- | --- |
|
|
63
|
+
| `w-` | `width` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
|
|
64
|
+
| `w-dvw/dvh/svw/svh/lvw/lvh` | `width` | Viewport-relative units |
|
|
65
|
+
| `w-fit/min/max` | `width` | `fit-content`, `min-content`, `max-content` |
|
|
66
|
+
| `h-` | `height` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
|
|
67
|
+
| `h-dvw/dvh/svw/svh/lvw/lvh` | `height` | Viewport-relative units |
|
|
68
|
+
| `h-fit/min/max` | `height` | `fit-content`, `min-content`, `max-content` |
|
|
69
|
+
| `min-w-` | `min-width` | Same as sizing |
|
|
70
|
+
| `min-h-` | `min-height` | Same as sizing |
|
|
71
|
+
| `max-w-` | `max-width` | Same as sizing |
|
|
72
|
+
| `max-h-` | `max-height` | Same as sizing |
|
|
73
|
+
| `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |
|
|
76
74
|
|
|
77
75
|
### Colors
|
|
78
76
|
|
|
79
77
|
Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.
|
|
80
78
|
|
|
81
|
-
| Color
|
|
82
|
-
|
|
|
83
|
-
| `white`, `black`, `transparent` | N/A
|
|
84
|
-
| `red`
|
|
85
|
-
| `pink`
|
|
86
|
-
| `purple`
|
|
87
|
-
| `deep-purple`
|
|
88
|
-
| `indigo`
|
|
89
|
-
| `blue`
|
|
90
|
-
| `light-blue`
|
|
91
|
-
| `cyan`
|
|
92
|
-
| `teal`
|
|
93
|
-
| `green`
|
|
94
|
-
| `light-green`
|
|
95
|
-
| `lime`
|
|
96
|
-
| `yellow`
|
|
97
|
-
| `amber`
|
|
98
|
-
| `orange`
|
|
99
|
-
| `deep-orange`
|
|
100
|
-
| `brown`
|
|
101
|
-
| `gray`
|
|
102
|
-
| `blue-gray`
|
|
79
|
+
| Color | Shades |
|
|
80
|
+
| --- | --- |
|
|
81
|
+
| `white`, `black`, `transparent` | N/A |
|
|
82
|
+
| `red` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
83
|
+
| `pink` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
84
|
+
| `purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
85
|
+
| `deep-purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
86
|
+
| `indigo` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
87
|
+
| `blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
88
|
+
| `light-blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
89
|
+
| `cyan` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
90
|
+
| `teal` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
91
|
+
| `green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
92
|
+
| `light-green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
93
|
+
| `lime` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
94
|
+
| `yellow` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
95
|
+
| `amber` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
96
|
+
| `orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
97
|
+
| `deep-orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
98
|
+
| `brown` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
99
|
+
| `gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
100
|
+
| `blue-gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
103
101
|
|
|
104
102
|
### Borders & Corners
|
|
105
103
|
|
|
106
|
-
| Utility
|
|
107
|
-
|
|
|
108
|
-
| `border`
|
|
109
|
-
| `border-none`
|
|
110
|
-
| `border-solid`
|
|
111
|
-
| `border-dashed`
|
|
112
|
-
| `border-dotted`
|
|
104
|
+
| Utility | Description |
|
|
105
|
+
| --- | --- |
|
|
106
|
+
| `border` | `{"border":"1px solid"}` |
|
|
107
|
+
| `border-none` | `{"border":"none"}` |
|
|
108
|
+
| `border-solid` | `{"border-style":"solid"}` |
|
|
109
|
+
| `border-dashed` | `{"border-style":"dashed"}` |
|
|
110
|
+
| `border-dotted` | `{"border-style":"dotted"}` |
|
|
113
111
|
| `border-collapse` | `{"border-collapse":"collapse"}` |
|
|
114
|
-
| `rounded-none`
|
|
115
|
-
| `rounded`
|
|
116
|
-
| `rounded-sm`
|
|
117
|
-
| `rounded-md`
|
|
118
|
-
| `rounded-lg`
|
|
119
|
-
| `rounded-xl`
|
|
120
|
-
| `rounded-full`
|
|
112
|
+
| `rounded-none` | `{"border-radius":"0"}` |
|
|
113
|
+
| `rounded` | `{"border-radius":".25rem"}` |
|
|
114
|
+
| `rounded-sm` | `{"border-radius":".125rem"}` |
|
|
115
|
+
| `rounded-md` | `{"border-radius":".375rem"}` |
|
|
116
|
+
| `rounded-lg` | `{"border-radius":".5rem"}` |
|
|
117
|
+
| `rounded-xl` | `{"border-radius":".75rem"}` |
|
|
118
|
+
| `rounded-full` | `{"border-radius":"9999px"}` |
|
|
119
|
+
| `border-{0-15}` | Border width in pixels (e.g., `border-0`, `border-1`, ..., `border-15`) |
|
|
120
|
+
| `border-x-{0-15}` | Horizontal border width in pixels |
|
|
121
|
+
| `border-y-{0-15}` | Vertical border width in pixels |
|
|
122
|
+
| `border-{t,b,l,r}-{0-15}` | Individual side border width in pixels |
|
|
121
123
|
|
|
122
124
|
### Shadows & Effects
|
|
123
125
|
|
|
124
|
-
| Utility
|
|
125
|
-
|
|
|
126
|
-
| `shadow`
|
|
127
|
-
| `shadow-
|
|
128
|
-
| `shadow
|
|
129
|
-
| `shadow-
|
|
130
|
-
| `shadow-
|
|
131
|
-
| `shadow-
|
|
132
|
-
| `shadow-
|
|
133
|
-
| `shadow-
|
|
134
|
-
| `shadow-
|
|
126
|
+
| Utility | Description |
|
|
127
|
+
| --- | --- |
|
|
128
|
+
| `shadow-2xs` | `{"box-shadow":"0 1px rgb(0 0 0 / 0.05)"}` |
|
|
129
|
+
| `shadow-xs` | `{"box-shadow":"0 1px 2px 0 rgb(0 0 0 / 0.05)"}` |
|
|
130
|
+
| `shadow` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
|
|
131
|
+
| `shadow-sm` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
|
|
132
|
+
| `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"}` |
|
|
133
|
+
| `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"}` |
|
|
134
|
+
| `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"}` |
|
|
135
|
+
| `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgb(0 0 0 / 0.25)"}` |
|
|
136
|
+
| `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"}` |
|
|
137
|
+
| `shadow-none` | `{"box-shadow":"0 0 #0000"}` |
|
|
138
|
+
| `ring` | `{"box-shadow":"0 0 0 3px rgb(59 130 246 / 0.5)"}` |
|
|
139
|
+
| `ring-0` | `{"box-shadow":"0 0 0 0px rgb(59 130 246 / 0.5)"}` |
|
|
140
|
+
| `ring-1` | `{"box-shadow":"0 0 0 1px rgb(59 130 246 / 0.5)"}` |
|
|
141
|
+
| `ring-2` | `{"box-shadow":"0 0 0 2px rgb(59 130 246 / 0.5)"}` |
|
|
142
|
+
| `ring-4` | `{"box-shadow":"0 0 0 4px rgb(59 130 246 / 0.5)"}` |
|
|
143
|
+
| `ring-8` | `{"box-shadow":"0 0 0 8px rgb(59 130 246 / 0.5)"}` |
|
|
144
|
+
| `ring-inset` | `{"--tw-ring-inset":"inset"}` |
|
|
145
|
+
| `opacity-0` | Fully transparent |
|
|
146
|
+
| `opacity-{1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100}` | Opacity values from 0-100 |
|
|
147
|
+
|
|
148
|
+
### Outline
|
|
149
|
+
|
|
150
|
+
| Utility | Description |
|
|
151
|
+
| --- | --- |
|
|
152
|
+
| `outline` | `{"outline-style":"solid"}` |
|
|
153
|
+
| `outline-none` | `{"outline":"2px solid transparent","outline-offset":"2px"}` |
|
|
154
|
+
| `outline-dashed` | `{"outline-style":"dashed"}` |
|
|
155
|
+
| `outline-dotted` | `{"outline-style":"dotted"}` |
|
|
156
|
+
| `outline-double` | `{"outline-style":"double"}` |
|
|
157
|
+
| `outline-0` | `{"outline-width":"0px"}` |
|
|
158
|
+
| `outline-1` | `{"outline-width":"1px"}` |
|
|
159
|
+
| `outline-2` | `{"outline-width":"2px"}` |
|
|
160
|
+
| `outline-4` | `{"outline-width":"4px"}` |
|
|
161
|
+
| `outline-8` | `{"outline-width":"8px"}` |
|
|
162
|
+
| `outline-offset-0` | `{"outline-offset":"0px"}` |
|
|
163
|
+
| `outline-offset-1` | `{"outline-offset":"1px"}` |
|
|
164
|
+
| `outline-offset-2` | `{"outline-offset":"2px"}` |
|
|
165
|
+
| `outline-offset-4` | `{"outline-offset":"4px"}` |
|
|
166
|
+
| `outline-offset-8` | `{"outline-offset":"8px"}` |
|
|
167
|
+
|
|
168
|
+
### Aspect Ratio
|
|
169
|
+
|
|
170
|
+
| Utility | Description |
|
|
171
|
+
| --- | --- |
|
|
172
|
+
| `aspect-auto` | `{"aspect-ratio":"auto"}` |
|
|
173
|
+
| `aspect-square` | `{"aspect-ratio":"1 / 1"}` |
|
|
174
|
+
| `aspect-video` | `{"aspect-ratio":"16 / 9"}` |
|
|
175
|
+
|
|
176
|
+
### Backdrop Filters
|
|
177
|
+
|
|
178
|
+
| Utility | Description |
|
|
179
|
+
| --- | --- |
|
|
180
|
+
| `backdrop-blur-none` | `{"backdrop-filter":"blur(0)"}` |
|
|
181
|
+
| `backdrop-blur-sm` | `{"backdrop-filter":"blur(4px)"}` |
|
|
182
|
+
| `backdrop-blur` | `{"backdrop-filter":"blur(8px)"}` |
|
|
183
|
+
| `backdrop-blur-md` | `{"backdrop-filter":"blur(12px)"}` |
|
|
184
|
+
| `backdrop-blur-lg` | `{"backdrop-filter":"blur(16px)"}` |
|
|
185
|
+
| `backdrop-blur-xl` | `{"backdrop-filter":"blur(24px)"}` |
|
|
186
|
+
| `backdrop-blur-2xl` | `{"backdrop-filter":"blur(40px)"}` |
|
|
187
|
+
| `backdrop-blur-3xl` | `{"backdrop-filter":"blur(64px)"}` |
|
|
135
188
|
|
|
136
189
|
### Transitions & Animations
|
|
137
190
|
|
|
138
|
-
| Utility
|
|
139
|
-
|
|
|
140
|
-
| `transition-none` | `{"transition":"none"}`
|
|
141
|
-
| `transition`
|
|
142
|
-
| `animate-none`
|
|
143
|
-
| `animate-spin`
|
|
144
|
-
| `animate-ping`
|
|
145
|
-
| `animate-pulse`
|
|
191
|
+
| Utility | Description |
|
|
192
|
+
| --- | --- |
|
|
193
|
+
| `transition-none` | `{"transition":"none"}` |
|
|
194
|
+
| `transition` | `{"transition":"all 150ms ease-in-out"}` |
|
|
195
|
+
| `animate-none` | `{"animation":"none"}` |
|
|
196
|
+
| `animate-spin` | `{"animation":"spin 1s linear infinite"}` |
|
|
197
|
+
| `animate-ping` | `{"animation":"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"}` |
|
|
198
|
+
| `animate-pulse` | `{"animation":"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}` |
|
|
199
|
+
| `duration-{75,100,150,200,300,500,700,1000}` | Transition duration in milliseconds |
|
|
146
200
|
|
|
147
201
|
### Interactivity
|
|
148
202
|
|
|
149
|
-
| Utility
|
|
150
|
-
|
|
|
151
|
-
| `cursor-pointer`
|
|
152
|
-
| `cursor-wait`
|
|
153
|
-
| `cursor-not-allowed`
|
|
154
|
-
| `select-none`
|
|
155
|
-
| `select-all`
|
|
203
|
+
| Utility | Description |
|
|
204
|
+
| --- | --- |
|
|
205
|
+
| `cursor-pointer` | `{"cursor":"pointer"}` |
|
|
206
|
+
| `cursor-wait` | `{"cursor":"wait"}` |
|
|
207
|
+
| `cursor-not-allowed` | `{"cursor":"not-allowed"}` |
|
|
208
|
+
| `select-none` | `{"user-select":"none"}` |
|
|
209
|
+
| `select-all` | `{"user-select":"all"}` |
|
|
156
210
|
| `pointer-events-auto` | `{"pointer-events":"auto"}` |
|
|
157
211
|
| `pointer-events-none` | `{"pointer-events":"none"}` |
|
|
158
|
-
| `resize`
|
|
159
|
-
| `resize-x`
|
|
160
|
-
| `resize-y`
|
|
161
|
-
| `resize-none`
|
|
212
|
+
| `resize` | `{"resize":"both"}` |
|
|
213
|
+
| `resize-x` | `{"resize":"horizontal"}` |
|
|
214
|
+
| `resize-y` | `{"resize":"vertical"}` |
|
|
215
|
+
| `resize-none` | `{"resize":"none"}` |
|
|
162
216
|
|
|
163
217
|
### Typography
|
|
164
218
|
|
|
165
|
-
| Utility
|
|
166
|
-
|
|
|
167
|
-
| `font-mono`
|
|
168
|
-
| `font-sans`
|
|
169
|
-
| `font-serif`
|
|
170
|
-
| `font-cursive`
|
|
171
|
-
| `text-xs`
|
|
172
|
-
| `text-sm`
|
|
173
|
-
| `text-base`
|
|
174
|
-
| `text-lg`
|
|
175
|
-
| `text-xl`
|
|
176
|
-
| `text-2xl`
|
|
177
|
-
| `text-3xl`
|
|
178
|
-
| `text-4xl`
|
|
179
|
-
| `text-5xl`
|
|
180
|
-
| `text-6xl`
|
|
181
|
-
| `text-7xl`
|
|
182
|
-
| `font-thin`
|
|
183
|
-
| `font-extralight`
|
|
184
|
-
| `font-light`
|
|
185
|
-
| `font-normal`
|
|
186
|
-
| `font-medium`
|
|
187
|
-
| `font-semibold`
|
|
188
|
-
| `font-bold`
|
|
189
|
-
| `font-extrabold`
|
|
190
|
-
| `font-black`
|
|
191
|
-
| `italic`
|
|
192
|
-
| `not-italic`
|
|
193
|
-
| `tracking-tighter`
|
|
194
|
-
| `tracking-tight`
|
|
195
|
-
| `tracking-normal`
|
|
196
|
-
| `tracking-wide`
|
|
197
|
-
| `tracking-wider`
|
|
198
|
-
| `tracking-widest`
|
|
199
|
-
| `leading-none`
|
|
200
|
-
| `leading-tight`
|
|
201
|
-
| `leading-snug`
|
|
202
|
-
| `leading-normal`
|
|
203
|
-
| `leading-relaxed`
|
|
204
|
-
| `leading-loose`
|
|
205
|
-
| `text-left`
|
|
206
|
-
| `text-right`
|
|
207
|
-
| `text-center`
|
|
208
|
-
| `text-justify`
|
|
209
|
-
| `underline`
|
|
210
|
-
| `decoration-none`
|
|
211
|
-
| `line-through`
|
|
212
|
-
| `uppercase`
|
|
213
|
-
| `lowercase`
|
|
214
|
-
| `capitalize`
|
|
215
|
-
| `truncate`
|
|
216
|
-
| `text-elipsis`
|
|
217
|
-
| `text-clip`
|
|
218
|
-
| `text-wrap`
|
|
219
|
-
| `text-nowrap`
|
|
220
|
-
| `text-balance`
|
|
221
|
-
| `text-pretty`
|
|
222
|
-
| `whitespace-normal`
|
|
223
|
-
| `whitespace-nowrap`
|
|
224
|
-
| `whitespace-pre`
|
|
225
|
-
| `whitespace-pre-line`
|
|
226
|
-
| `whitespace-pre-wrap`
|
|
227
|
-
| `whitespace-break-spaces` | `{"white-space":"break-spaces"}`
|
|
219
|
+
| Utility | Description |
|
|
220
|
+
| --- | --- |
|
|
221
|
+
| `font-mono` | `{"font-family":"monospace"}` |
|
|
222
|
+
| `font-sans` | `{"font-family":"sans-serif"}` |
|
|
223
|
+
| `font-serif` | `{"font-family":"serif"}` |
|
|
224
|
+
| `font-cursive` | `{"font-family":"cursive"}` |
|
|
225
|
+
| `text-xs` | `{"font-size":".75rem","line-height":"calc(1 / 0.75)"}` |
|
|
226
|
+
| `text-sm` | `{"font-size":".875rem","line-height":"calc(1.25 / 0.875)"}` |
|
|
227
|
+
| `text-base` | `{"font-size":"1rem","line-height":"calc(1.5 / 1)"}` |
|
|
228
|
+
| `text-lg` | `{"font-size":"1.125rem","line-height":"calc(1.75 / 1.125)"}` |
|
|
229
|
+
| `text-xl` | `{"font-size":"1.25rem","line-height":"calc(1.75 / 1.25)"}` |
|
|
230
|
+
| `text-2xl` | `{"font-size":"1.5rem","line-height":"calc(2 / 1.5)"}` |
|
|
231
|
+
| `text-3xl` | `{"font-size":"1.875rem","line-height":"calc(2.25 / 1.875)"}` |
|
|
232
|
+
| `text-4xl` | `{"font-size":"2.25rem","line-height":"calc(2.5 / 2.25)"}` |
|
|
233
|
+
| `text-5xl` | `{"font-size":"3rem","line-height":"1"}` |
|
|
234
|
+
| `text-6xl` | `{"font-size":"3.75rem","line-height":"1"}` |
|
|
235
|
+
| `text-7xl` | `{"font-size":"4.5rem","line-height":"1"}` |
|
|
236
|
+
| `font-thin` | `{"font-weight":100}` |
|
|
237
|
+
| `font-extralight` | `{"font-weight":200}` |
|
|
238
|
+
| `font-light` | `{"font-weight":300}` |
|
|
239
|
+
| `font-normal` | `{"font-weight":400}` |
|
|
240
|
+
| `font-medium` | `{"font-weight":500}` |
|
|
241
|
+
| `font-semibold` | `{"font-weight":600}` |
|
|
242
|
+
| `font-bold` | `{"font-weight":700}` |
|
|
243
|
+
| `font-extrabold` | `{"font-weight":800}` |
|
|
244
|
+
| `font-black` | `{"font-weight":900}` |
|
|
245
|
+
| `italic` | `{"font-style":"italic"}` |
|
|
246
|
+
| `not-italic` | `{"font-style":"normal"}` |
|
|
247
|
+
| `tracking-tighter` | `{"letter-spacing":"-0.05em"}` |
|
|
248
|
+
| `tracking-tight` | `{"letter-spacing":"-0.025em"}` |
|
|
249
|
+
| `tracking-normal` | `{"letter-spacing":"0"}` |
|
|
250
|
+
| `tracking-wide` | `{"letter-spacing":"0.025em"}` |
|
|
251
|
+
| `tracking-wider` | `{"letter-spacing":"0.05em"}` |
|
|
252
|
+
| `tracking-widest` | `{"letter-spacing":"0.1em"}` |
|
|
253
|
+
| `leading-none` | `{"line-height":"1"}` |
|
|
254
|
+
| `leading-tight` | `{"line-height":"1.25"}` |
|
|
255
|
+
| `leading-snug` | `{"line-height":"1.375"}` |
|
|
256
|
+
| `leading-normal` | `{"line-height":"1.5"}` |
|
|
257
|
+
| `leading-relaxed` | `{"line-height":"1.625"}` |
|
|
258
|
+
| `leading-loose` | `{"line-height":"2"}` |
|
|
259
|
+
| `text-left` | `{"text-align":"left"}` |
|
|
260
|
+
| `text-right` | `{"text-align":"right"}` |
|
|
261
|
+
| `text-center` | `{"text-align":"center"}` |
|
|
262
|
+
| `text-justify` | `{"text-align":"justify"}` |
|
|
263
|
+
| `underline` | `{"text-decoration":"underline"}` |
|
|
264
|
+
| `decoration-none` | `{"text-decoration":"none"}` |
|
|
265
|
+
| `line-through` | `{"text-decoration":"line-through"}` |
|
|
266
|
+
| `uppercase` | `{"text-transform":"uppercase"}` |
|
|
267
|
+
| `lowercase` | `{"text-transform":"lowercase"}` |
|
|
268
|
+
| `capitalize` | `{"text-transform":"capitalize"}` |
|
|
269
|
+
| `truncate` | `{"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}` |
|
|
270
|
+
| `text-elipsis` | `{"text-overflow":"ellipsis"}` |
|
|
271
|
+
| `text-clip` | `{"text-overflow":"clip"}` |
|
|
272
|
+
| `text-wrap` | `{"text-wrap":"wrap"}` |
|
|
273
|
+
| `text-nowrap` | `{"text-wrap":"nowrap"}` |
|
|
274
|
+
| `text-balance` | `{"text-wrap":"balance"}` |
|
|
275
|
+
| `text-pretty` | `{"text-wrap":"pretty"}` |
|
|
276
|
+
| `whitespace-normal` | `{"white-space":"normal"}` |
|
|
277
|
+
| `whitespace-nowrap` | `{"white-space":"nowrap"}` |
|
|
278
|
+
| `whitespace-pre` | `{"white-space":"pre"}` |
|
|
279
|
+
| `whitespace-pre-line` | `{"white-space":"pre-line"}` |
|
|
280
|
+
| `whitespace-pre-wrap` | `{"white-space":"pre-wrap"}` |
|
|
281
|
+
| `whitespace-break-spaces` | `{"white-space":"break-spaces"}` |
|
|
228
282
|
|
|
229
283
|
### Flexbox & Layout
|
|
230
284
|
|
|
231
|
-
| Utility
|
|
232
|
-
|
|
|
233
|
-
| `flex`
|
|
234
|
-
| `flex-1`
|
|
235
|
-
| `flex-inline`
|
|
236
|
-
| `flex-row`
|
|
237
|
-
| `flex-col`
|
|
238
|
-
| `flex-row-reverse`
|
|
239
|
-
| `flex-col-reverse`
|
|
240
|
-
| `flex-wrap`
|
|
241
|
-
| `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}`
|
|
242
|
-
| `flex-nowrap`
|
|
243
|
-
| `justify-start`
|
|
244
|
-
| `justify-end`
|
|
245
|
-
| `justify-center`
|
|
246
|
-
| `justify-between`
|
|
247
|
-
| `justify-around`
|
|
248
|
-
| `justify-evenly`
|
|
249
|
-
| `justify-stretch`
|
|
250
|
-
| `items-start`
|
|
251
|
-
| `items-end`
|
|
252
|
-
| `items-center`
|
|
253
|
-
| `items-stretch`
|
|
254
|
-
| `flex-grow`
|
|
255
|
-
| `flex-shrink`
|
|
256
|
-
| `flex-none`
|
|
257
|
-
| `flex-auto`
|
|
258
|
-
| `flex-initial`
|
|
259
|
-
| `grow`
|
|
260
|
-
| `grow-0`
|
|
261
|
-
| `shrink`
|
|
262
|
-
| `shrink-0`
|
|
263
|
-
| `self-auto`
|
|
264
|
-
| `self-start`
|
|
265
|
-
| `self-end`
|
|
266
|
-
| `self-center`
|
|
267
|
-
| `self-stretch`
|
|
268
|
-
| `self-baseline`
|
|
269
|
-
| `content-normal`
|
|
270
|
-
| `content-start`
|
|
271
|
-
| `content-end`
|
|
272
|
-
| `content-center`
|
|
273
|
-
| `content-between`
|
|
274
|
-
| `content-around`
|
|
275
|
-
| `content-evenly`
|
|
276
|
-
| `content-stretch`
|
|
277
|
-
| `items-baseline`
|
|
285
|
+
| Utility | Description |
|
|
286
|
+
| --- | --- |
|
|
287
|
+
| `flex` | `{"display":"flex"}` |
|
|
288
|
+
| `flex-1` | `{"flex":"1 1 0%"}` |
|
|
289
|
+
| `flex-inline` | `{"display":"inline-flex"}` |
|
|
290
|
+
| `flex-row` | `{"flex-direction":"row"}` |
|
|
291
|
+
| `flex-col` | `{"flex-direction":"column"}` |
|
|
292
|
+
| `flex-row-reverse` | `{"flex-direction":"row-reverse"}` |
|
|
293
|
+
| `flex-col-reverse` | `{"flex-direction":"column-reverse"}` |
|
|
294
|
+
| `flex-wrap` | `{"flex-wrap":"wrap"}` |
|
|
295
|
+
| `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}` |
|
|
296
|
+
| `flex-nowrap` | `{"flex-wrap":"nowrap"}` |
|
|
297
|
+
| `justify-start` | `{"justify-content":"flex-start"}` |
|
|
298
|
+
| `justify-end` | `{"justify-content":"flex-end"}` |
|
|
299
|
+
| `justify-center` | `{"justify-content":"center"}` |
|
|
300
|
+
| `justify-between` | `{"justify-content":"space-between"}` |
|
|
301
|
+
| `justify-around` | `{"justify-content":"space-around"}` |
|
|
302
|
+
| `justify-evenly` | `{"justify-content":"space-evenly"}` |
|
|
303
|
+
| `justify-stretch` | `{"justify-content":"stretch"}` |
|
|
304
|
+
| `items-start` | `{"align-items":"flex-start"}` |
|
|
305
|
+
| `items-end` | `{"align-items":"flex-end"}` |
|
|
306
|
+
| `items-center` | `{"align-items":"center"}` |
|
|
307
|
+
| `items-stretch` | `{"align-items":"stretch"}` |
|
|
308
|
+
| `flex-grow` | `{"flex-grow":1}` |
|
|
309
|
+
| `flex-shrink` | `{"flex-shrink":1}` |
|
|
310
|
+
| `flex-none` | `{"flex":"none"}` |
|
|
311
|
+
| `flex-auto` | `{"flex":"1 1 auto"}` |
|
|
312
|
+
| `flex-initial` | `{"flex":"0 1 auto"}` |
|
|
313
|
+
| `grow` | `{"flex-grow":"1"}` |
|
|
314
|
+
| `grow-0` | `{"flex-grow":"0"}` |
|
|
315
|
+
| `shrink` | `{"flex-shrink":"1"}` |
|
|
316
|
+
| `shrink-0` | `{"flex-shrink":"0"}` |
|
|
317
|
+
| `self-auto` | `{"align-self":"auto"}` |
|
|
318
|
+
| `self-start` | `{"align-self":"flex-start"}` |
|
|
319
|
+
| `self-end` | `{"align-self":"flex-end"}` |
|
|
320
|
+
| `self-center` | `{"align-self":"center"}` |
|
|
321
|
+
| `self-stretch` | `{"align-self":"stretch"}` |
|
|
322
|
+
| `self-baseline` | `{"align-self":"baseline"}` |
|
|
323
|
+
| `content-normal` | `{"align-content":"normal"}` |
|
|
324
|
+
| `content-start` | `{"align-content":"flex-start"}` |
|
|
325
|
+
| `content-end` | `{"align-content":"flex-end"}` |
|
|
326
|
+
| `content-center` | `{"align-content":"center"}` |
|
|
327
|
+
| `content-between` | `{"align-content":"space-between"}` |
|
|
328
|
+
| `content-around` | `{"align-content":"space-around"}` |
|
|
329
|
+
| `content-evenly` | `{"align-content":"space-evenly"}` |
|
|
330
|
+
| `content-stretch` | `{"align-content":"stretch"}` |
|
|
331
|
+
| `items-baseline` | `{"align-items":"baseline"}` |
|
|
332
|
+
| `gap-0` | No gap |
|
|
333
|
+
| `gap-{1-512}` | Gap in rem units (0.25rem increments) |
|
|
334
|
+
| `gap-{1-512}px` | Gap in pixels |
|
|
335
|
+
| `gap-x-{1-512}` | Horizontal gap in rem units |
|
|
336
|
+
| `gap-y-{1-512}` | Vertical gap in rem units |
|
|
337
|
+
| `gap-x-{1-512}px` | Horizontal gap in pixels |
|
|
338
|
+
| `gap-y-{1-512}px` | Vertical gap in pixels |
|
|
339
|
+
| `space-x-{0-512}` | Horizontal spacing between children (rem) |
|
|
340
|
+
| `space-y-{0-512}` | Vertical spacing between children (rem) |
|
|
341
|
+
| `space-x-{0-512}px` | Horizontal spacing between children (px) |
|
|
342
|
+
| `space-y-{0-512}px` | Vertical spacing between children (px) |
|
|
343
|
+
| `divide-x` | Add 1px vertical border between horizontal children |
|
|
344
|
+
| `divide-y` | Add 1px horizontal border between vertical children |
|
|
345
|
+
| `divide-x-{0,2,4,8}` | Vertical border width between horizontal children |
|
|
346
|
+
| `divide-y-{0,2,4,8}` | Horizontal border width between vertical children |
|
|
347
|
+
| `divide-solid` | Solid border style for dividers |
|
|
348
|
+
| `divide-dashed` | Dashed border style for dividers |
|
|
349
|
+
| `divide-dotted` | Dotted border style for dividers |
|
|
350
|
+
| `divide-none` | Remove divider borders |
|
|
278
351
|
|
|
279
352
|
### Position & Inset
|
|
280
353
|
|
|
281
|
-
| Utility
|
|
282
|
-
|
|
|
283
|
-
| `relative`
|
|
284
|
-
| `fixed`
|
|
285
|
-
| `absolute`
|
|
286
|
-
| `sticky`
|
|
287
|
-
| `object-contain` | `{"object-fit":"contain"}`
|
|
288
|
-
| `object-cover`
|
|
289
|
-
| `object-fill`
|
|
290
|
-
| `object-none`
|
|
291
|
-
| `
|
|
292
|
-
| `inset-
|
|
293
|
-
| `inset-
|
|
294
|
-
| `inset-
|
|
295
|
-
| `inset-
|
|
296
|
-
| `inset-
|
|
297
|
-
| `
|
|
354
|
+
| Utility | Description |
|
|
355
|
+
| --- | --- |
|
|
356
|
+
| `relative` | `{"position":"relative"}` |
|
|
357
|
+
| `fixed` | `{"position":"fixed"}` |
|
|
358
|
+
| `absolute` | `{"position":"absolute"}` |
|
|
359
|
+
| `sticky` | `{"position":"sticky"}` |
|
|
360
|
+
| `object-contain` | `{"object-fit":"contain"}` |
|
|
361
|
+
| `object-cover` | `{"object-fit":"cover"}` |
|
|
362
|
+
| `object-fill` | `{"object-fit":"fill"}` |
|
|
363
|
+
| `object-none` | `{"object-fit":"none"}` |
|
|
364
|
+
| `inset-0` | `{"inset":"0"}` |
|
|
365
|
+
| `inset-auto` | `{"inset":"auto"}` |
|
|
366
|
+
| `inset-x-0` | `{"left":"0","right":"0"}` |
|
|
367
|
+
| `inset-y-0` | `{"top":"0","bottom":"0"}` |
|
|
368
|
+
| `inset-x-auto` | `{"left":"auto","right":"auto"}` |
|
|
369
|
+
| `inset-y-auto` | `{"top":"auto","bottom":"auto"}` |
|
|
370
|
+
| `top-{0-512}`, `bottom-{0-512}`, `left-{0-512}`, `right-{0-512}` | Position in rem units (0.25rem increments) |
|
|
371
|
+
| `top-{0-512}px`, `bottom-{0-512}px`, `left-{0-512}px`, `right-{0-512}px` | Position in pixels |
|
|
372
|
+
| `top-{1-100}%`, `bottom-{1-100}%`, `left-{1-100}%`, `right-{1-100}%` | Position in percentages |
|
|
373
|
+
| `top-auto`, `bottom-auto`, `left-auto`, `right-auto` | Auto positioning |
|
|
374
|
+
| `z-{1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100}` | Z-index values |
|
|
375
|
+
|
|
376
|
+
### Display & Visibility
|
|
377
|
+
|
|
378
|
+
| Utility | Description |
|
|
379
|
+
| --- | --- |
|
|
380
|
+
| `block` | `{"display":"block"}` |
|
|
381
|
+
| `contents` | `{"display":"contents"}` |
|
|
382
|
+
| `hidden` | `{"display":"none"}` |
|
|
383
|
+
| `inline` | `{"display":"inline"}` |
|
|
384
|
+
| `visible` | `{"visibility":"visible"}` |
|
|
385
|
+
| `invisible` | `{"visibility":"hidden"}` |
|
|
386
|
+
| `collapse` | `{"visibility":"collapse"}` |
|
|
387
|
+
|
|
388
|
+
### Overflow & Scrolling
|
|
389
|
+
|
|
390
|
+
| Utility | Description |
|
|
391
|
+
| --- | --- |
|
|
392
|
+
| `overflow-auto` | `{"overflow":"auto"}` |
|
|
393
|
+
| `overflow-x-auto` | `{"overflow-x":"auto"}` |
|
|
394
|
+
| `overflow-y-auto` | `{"overflow-y":"auto"}` |
|
|
395
|
+
| `overflow-hidden` | `{"overflow":"hidden"}` |
|
|
396
|
+
| `overflow-x-hidden` | `{"overflow-x":"hidden"}` |
|
|
397
|
+
| `overflow-y-hidden` | `{"overflow-y":"hidden"}` |
|
|
398
|
+
| `overflow-visible` | `{"overflow":"visible"}` |
|
|
399
|
+
| `overscroll-auto` | `{"overscroll-behavior":"auto"}` |
|
|
400
|
+
| `overscroll-contain` | `{"overscroll-behavior":"contain"}` |
|
|
401
|
+
| `overscroll-none` | `{"overscroll-behavior":"none"}` |
|
|
402
|
+
| `overscroll-x-auto` | `{"overscroll-behavior-x":"auto"}` |
|
|
403
|
+
| `overscroll-x-contain` | `{"overscroll-behavior-x":"contain"}` |
|
|
404
|
+
| `overscroll-x-none` | `{"overscroll-behavior-x":"none"}` |
|
|
405
|
+
| `overscroll-y-auto` | `{"overscroll-behavior-y":"auto"}` |
|
|
406
|
+
| `overscroll-y-contain` | `{"overscroll-behavior-y":"contain"}` |
|
|
407
|
+
| `overscroll-y-none` | `{"overscroll-behavior-y":"none"}` |
|
|
408
|
+
|
|
409
|
+
### Backgrounds
|
|
410
|
+
|
|
411
|
+
| Utility | Description |
|
|
412
|
+
| --- | --- |
|
|
413
|
+
| `bg-auto` | `{"background-size":"auto"}` |
|
|
414
|
+
| `bg-cover` | `{"background-size":"cover"}` |
|
|
415
|
+
| `bg-contain` | `{"background-size":"contain"}` |
|
|
416
|
+
| `bg-no-repeat` | `{"background-repeat":"no-repeat"}` |
|
|
417
|
+
| `bg-fixed` | `{"background-attachment":"fixed"}` |
|
|
418
|
+
| `bg-local` | `{"background-attachment":"local"}` |
|
|
419
|
+
| `bg-scroll` | `{"background-attachment":"scroll"}` |
|
|
420
|
+
|
|
421
|
+
### Lists
|
|
422
|
+
|
|
423
|
+
| Utility | Description |
|
|
424
|
+
| --- | --- |
|
|
425
|
+
| `list-none` | `{"list-style-type":"none"}` |
|
|
426
|
+
| `list-disc` | `{"list-style-type":"disc"}` |
|
|
427
|
+
| `list-decimal` | `{"list-style-type":"decimal"}` |
|
|
428
|
+
|
|
429
|
+
### Vertical Alignment
|
|
430
|
+
|
|
431
|
+
| Utility | Description |
|
|
432
|
+
| --- | --- |
|
|
433
|
+
| `align-baseline` | `{"vertical-align":"baseline"}` |
|
|
434
|
+
| `align-top` | `{"vertical-align":"top"}` |
|
|
435
|
+
| `align-middle` | `{"vertical-align":"middle"}` |
|
|
436
|
+
| `align-bottom` | `{"vertical-align":"bottom"}` |
|
|
437
|
+
| `align-text-top` | `{"vertical-align":"text-top"}` |
|
|
438
|
+
| `align-text-bottom` | `{"vertical-align":"text-bottom"}` |
|
|
439
|
+
|
|
440
|
+
### Viewport Sizing
|
|
441
|
+
|
|
442
|
+
| Utility | Description |
|
|
443
|
+
| --- | --- |
|
|
444
|
+
| `min-h-screen` | `{"min-height":"100vh"}` |
|
|
445
|
+
| `max-h-screen` | `{"max-height":"100vh"}` |
|
|
446
|
+
| `min-w-screen` | `{"min-width":"100vw"}` |
|
|
447
|
+
| `h-dvh` | `{"height":"100dvh"}` |
|
|
448
|
+
| `h-svh` | `{"height":"100svh"}` |
|
|
449
|
+
| `h-lvh` | `{"height":"100lvh"}` |
|
|
450
|
+
| `w-dvw` | `{"width":"100dvw"}` |
|
|
451
|
+
| `w-svw` | `{"width":"100svw"}` |
|
|
452
|
+
| `w-lvw` | `{"width":"100lvw"}` |
|
|
453
|
+
| `min-h-dvh` | `{"min-height":"100dvh"}` |
|
|
454
|
+
| `min-h-svh` | `{"min-height":"100svh"}` |
|
|
455
|
+
| `min-h-lvh` | `{"min-height":"100lvh"}` |
|
|
456
|
+
|
|
457
|
+
### Accessibility
|
|
458
|
+
|
|
459
|
+
| Utility | Description |
|
|
460
|
+
| --- | --- |
|
|
461
|
+
| `sr-only` | `{"position":"absolute","width":"1px","height":"1px","padding":"0","margin":"-1px","overflow":"hidden","clip":"rect(0, 0, 0, 0)","white-space":"nowrap","border-width":"0"}` |
|
|
462
|
+
| `not-sr-only` | `{"position":"static","width":"auto","height":"auto","padding":"0","margin":"0","overflow":"visible","clip":"auto","white-space":"normal"}` |
|
|
298
463
|
|
|
299
464
|
### Other Utilities
|
|
300
465
|
|
|
301
|
-
| Utility
|
|
302
|
-
|
|
|
303
|
-
| `no-underline` | `{"text-decoration":"none"}`
|
|
304
|
-
| `box-border`
|
|
305
|
-
| `box-content`
|
|
466
|
+
| Utility | Description |
|
|
467
|
+
| --- | --- |
|
|
468
|
+
| `no-underline` | `{"text-decoration":"none"}` |
|
|
469
|
+
| `box-border` | `{"box-sizing":"border-box"}` |
|
|
470
|
+
| `box-content` | `{"box-sizing":"content-box"}` |
|
|
471
|
+
| `text-{0-99}px` | Font size in pixels (e.g., `text-12px`, `text-16px`) |
|
|
472
|
+
| `text-{0-24.75}rem` | Font size in rem units (0.25rem increments) |
|
|
306
473
|
|
|
307
|
-
---
|
|
474
|
+
---
|
|
308
475
|
|
|
309
|
-
|
|
476
|
+
*Generated automatically from `src/css_gen_utils.ts`*
|