0
# CSS Rules
1

2
Modular CSS rule generators covering layout, typography, colors, effects, and responsive design utilities. These rules transform utility class names into CSS properties and values.
3

4
## Capabilities
5

6
### Rules Array
7

8
Collection of all CSS rule generators for the preset.
9

10
```typescript { .api }
11
const rules: Rule[];
12
```
13

14
**Usage Example:**
15

16
```typescript
17
import { rules } from "@unocss/preset-mini/rules";
18

19
// Rules are used internally by UnoCSS to generate CSS
20
// Each rule is either a static rule or dynamic matcher
21
console.log(rules.length); // ~200+ rules for comprehensive coverage
22
```
23

24
## Rule Categories
25

26
### Layout Rules
27

28
Layout and positioning utilities for controlling element placement and structure.
29

30
**Position Rules:**
31
- `static`, `fixed`, `absolute`, `relative`, `sticky`
32
- `top-*`, `right-*`, `bottom-*`, `left-*` (position offsets)
33
- `inset-*` (shorthand for all sides)
34
- `z-*` (z-index values)
35

36
**Display Rules:**
37
- `block`, `inline-block`, `inline`, `flex`, `inline-flex`
38
- `grid`, `inline-grid`, `table`, `table-cell`
39
- `hidden` (display: none)
40

41
**Container Rules:**
42
- `container` (responsive container)
43
- Custom container configurations via theme
44

45
### Flexbox and Grid Rules
46

47
Modern layout system utilities for flexbox and CSS grid.
48

49
**Flexbox Rules:**
50
- `flex-*` (flex-grow, flex-shrink, flex-basis)
51
- `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
52
- `flex-wrap`, `flex-nowrap`, `flex-wrap-reverse`
53
- `justify-*` (justify-content values)
54
- `items-*` (align-items values)
55
- `self-*` (align-self values)
56
- `content-*` (align-content values)
57

58
**Grid Rules:**
59
- `grid-cols-*` (grid-template-columns)
60
- `grid-rows-*` (grid-template-rows)
61
- `col-span-*`, `row-span-*` (grid column/row span)
62
- `col-start-*`, `col-end-*` (grid column placement)
63
- `row-start-*`, `row-end-*` (grid row placement)
64
- `gap-*`, `gap-x-*`, `gap-y-*` (grid and flexbox gaps)
65

66
### Sizing Rules
67

68
Width, height, and sizing utilities with comprehensive value support.
69

70
**Size Rules:**
71
- `w-*`, `h-*` (width, height)
72
- `min-w-*`, `min-h-*` (minimum sizes)
73
- `max-w-*`, `max-h-*` (maximum sizes)
74
- `size-*` (width and height together)
75

76
**Value Support:**
77
- Numeric scales (0-96)
78
- Fractions (1/2, 1/3, 2/3, etc.)
79
- Viewport units (screen, vh, vw)
80
- Arbitrary values in brackets `[200px]`
81

82
### Spacing Rules
83

84
Margin and padding utilities with directional support.
85

86
**Margin Rules:**
87
- `m-*` (all sides), `mx-*` (horizontal), `my-*` (vertical)
88
- `mt-*`, `mr-*`, `mb-*`, `ml-*` (individual sides)
89
- `ms-*`, `me-*` (logical start/end)
90

91
**Padding Rules:**
92
- `p-*` (all sides), `px-*` (horizontal), `py-*` (vertical)
93
- `pt-*`, `pr-*`, `pb-*`, `pl-*` (individual sides)
94
- `ps-*`, `pe-*` (logical start/end)
95

96
**Value Support:**
97
- Theme spacing scale (0-96)
98
- Negative values with `-` prefix
99
- Arbitrary values `[10px]`
100

101
### Color Rules
102

103
Comprehensive color utilities with opacity support and theme integration.
104

105
**Text Colors:**
106
- `text-*` (text color from theme)
107
- `text-opacity-*` (text color opacity)
108

109
**Background Colors:**
110
- `bg-*` (background color from theme)
111
- `bg-opacity-*` (background color opacity)
112

113
**Border Colors:**
114
- `border-*` (border color from theme)
115
- `border-opacity-*` (border color opacity)
116

117
**Color Value Support:**
118
- Theme color names: `red-500`, `blue`, `gray-100`
119
- Hex colors: `[#ff0000]`, `hex-ff0000`
120
- CSS variables: `[$primary-color]`
121
- Opacity modifiers: `red-500/50` (50% opacity)
122

123
### Border Rules
124

125
Border styling with width, style, radius, and color control.
126

127
**Border Width:**
128
- `border`, `border-*` (all sides)
129
- `border-t-*`, `border-r-*`, `border-b-*`, `border-l-*` (individual sides)
130
- `border-x-*`, `border-y-*` (horizontal/vertical)
131

132
**Border Style:**
133
- `border-solid`, `border-dashed`, `border-dotted`
134
- `border-double`, `border-hidden`, `border-none`
135

136
**Border Radius:**
137
- `rounded` (default), `rounded-*` (themed values)
138
- `rounded-t-*`, `rounded-r-*`, `rounded-b-*`, `rounded-l-*`
139
- `rounded-tl-*`, `rounded-tr-*`, `rounded-bl-*`, `rounded-br-*`
140

141
### Typography Rules
142

143
Text styling utilities covering fonts, sizes, weights, and text properties.
144

145
**Font Rules:**
146
- `font-*` (font family from theme)
147
- `text-*` (font size from theme)
148
- `font-*` (font weight: thin, light, normal, medium, semibold, bold, extrabold, black)
149

150
**Text Styling:**
151
- `italic`, `not-italic`
152
- `underline`, `no-underline`, `line-through`
153
- `uppercase`, `lowercase`, `capitalize`, `normal-case`
154

155
**Text Layout:**
156
- `text-left`, `text-center`, `text-right`, `text-justify`
157
- `align-*` (vertical-align values)
158
- `whitespace-*` (white-space property)
159
- `break-*` (word-break and overflow-wrap)
160

161
**Line Height and Spacing:**
162
- `leading-*` (line-height from theme)
163
- `tracking-*` (letter-spacing from theme)
164

165
### Effects Rules
166

167
Visual effects including shadows, filters, and transforms.
168

169
**Shadow Rules:**
170
- `shadow`, `shadow-*` (box-shadow from theme)
171
- `shadow-none` (remove shadow)
172
- Custom shadow colors: `shadow-red-500`
173

174
**Transform Rules:**
175
- `scale-*`, `scale-x-*`, `scale-y-*`
176
- `rotate-*` (rotation angles)
177
- `translate-x-*`, `translate-y-*`
178
- `skew-x-*`, `skew-y-*`
179
- `transform`, `transform-none`
180

181
**Filter Rules:**
182
- `blur-*` (blur filter from theme)
183
- `brightness-*`, `contrast-*`, `saturate-*`
184
- `hue-rotate-*`, `invert`, `sepia`
185
- `filter`, `filter-none`
186

187
### Transition Rules
188

189
Animation and transition utilities for smooth interactions.
190

191
**Transition Rules:**
192
- `transition`, `transition-none`
193
- `transition-*` (transition-property from theme)
194
- `duration-*` (transition-duration from theme)
195
- `ease-*` (transition-timing-function from theme)
196
- `delay-*` (transition-delay)
197

198
### Variable Rules
199

200
CSS custom property utilities for dynamic theming.
201

202
**Variable Definition:**
203
- `[--variable-name:value]` (define CSS variables)
204
- Integration with theme values
205

206
### Static Rules
207

208
Pre-defined utility classes for common patterns.
209

210
**Common Utilities:**
211
- `sr-only` (screen reader only)
212
- `not-sr-only` (undo screen reader only)
213
- `focus-within`, `focus-visible`
214
- `pointer-events-none`, `pointer-events-auto`
215
- `select-none`, `select-text`, `select-all`
216

217
### Question Mark Rules
218

219
Special debugging and development utilities.
220

221
**Debug Rules:**
222
- `?` utilities for development debugging
223
- Temporary styling for layout inspection
224

225
## Rule Processing
226

227
### Value Handlers
228

229
Rules use sophisticated value handlers for processing utility values:
230

231
- **Numeric values**: Converted to appropriate units (rem, px, %)
232
- **Fraction values**: Converted to percentages (1/2 → 50%)
233
- **Arbitrary values**: Passed through with bracket notation `[value]`
234
- **Theme lookup**: Values resolved from theme configuration
235
- **CSS functions**: Support for calc(), var(), etc.
236

237
### Dynamic Matching
238

239
Many rules use dynamic matchers for flexible value support:
240

241
```typescript
242
// Example: margin utilities
243
['m', directionSize('margin')] // Matches m-4, mx-2, mt-auto, etc.
244
```
245

246
### Negative Values
247

248
Utilities support negative values where appropriate:
249

250
```typescript
251
// Negative margin
252
'm--4' // margin: -1rem
253
'-m-4' // margin: -1rem (alternative syntax)
254
```