0
# CSS Rules System
1

2
Comprehensive collection of CSS utility rules providing Tailwind CSS compatible utilities for animations, layouts, typography, behaviors, and more.
3

4
## Capabilities
5

6
### Rules Array
7

8
Complete collection of CSS rules combining preset-mini rules with Wind-specific extensions.
9

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

13
type Rule<T = {}> = StaticRule | DynamicRule<T>;
14
type StaticRule = [string, CSSObject | CSSValue];
15
type DynamicRule<T = {}> = [
16
  RegExp,
17
  (match: RegExpMatchArray, context: RuleContext<T>) => CSSObject | CSSValue | undefined,
18
  RuleOptions?
19
];
20

21
interface RuleContext<T = {}> {
22
  theme: T;
23
  generator: UnoGenerator;
24
  variantHandlers: VariantHandler[];
25
  constructCSS: (ctx: CSSEntries, tagNames?: Set<string>) => string;
26
  rawSelector: string;
27
}
28
```
29

30
### Rule Categories
31

32
#### Container Rules
33

34
Responsive container layout system with flexible sizing and centering.
35

36
```typescript { .api }
37
const container: Rule<Theme>[];
38
const containerShortcuts: Shortcut<Theme>[];
39
```
40

41
**Container Rule Pattern:**
42
- `/^__container$/` - Internal container rule with responsive behavior
43
- Supports theme-based padding, max-width, and centering
44

45
**Container Shortcut Pattern:**  
46
- `/^(?:(\w+)[:-])?container$/` - Creates responsive container utilities
47
- Examples: `container`, `sm:container`, `lg:container`
48

49
#### Animation Rules
50

51
CSS animation utilities with extensive keyframe definitions.
52

53
```typescript { .api }
54
const animations: Rule<Theme>[];
55
```
56

57
**Features:**
58
- 80+ predefined animation keyframes
59
- Custom durations and timing functions
60
- Animation iteration counts and properties
61
- Categories: Attention Seekers, Fading, Bouncing, Sliding, Zooming, Rotating, etc.
62

63
#### Background Rules
64

65
Background styling utilities including gradients, images, and blend modes.
66

67
```typescript { .api }
68
const backgroundStyles: Rule<Theme>[];
69
const backgroundBlendModes: Rule<Theme>[];
70
```
71

72
**Features:**
73
- Background image utilities
74
- Gradient definitions
75
- Background blend mode support
76
- Mix blend mode utilities
77

78
#### Behavior Rules
79

80
Interactive and visual behavior utilities.
81

82
```typescript { .api }
83
const accents: Rule<Theme>[];
84
const carets: Rule<Theme>[];
85
const imageRenderings: Rule<Theme>[];
86
const listStyle: Rule<Theme>[];
87
const overscrolls: Rule<Theme>[];
88
const scrollBehaviors: Rule<Theme>[];
89
```
90

91
**Features:**
92
- Accent color utilities
93
- Caret color and styling
94
- Image rendering modes
95
- List style utilities
96
- Overscroll behavior
97
- Smooth scroll behavior
98

99
#### Layout Rules
100

101
Layout and positioning utilities.
102

103
```typescript { .api }
104
const columns: Rule<Theme>[];
105
const tables: Rule<Theme>[];
106
const spaces: Rule<Theme>[];
107
const divides: Rule<Theme>[];
108
```
109

110
**Features:**
111
- CSS columns for multi-column layouts
112
- Table layout utilities
113
- Space between elements
114
- Element divider utilities
115

116
#### Filter Rules
117

118
CSS filter and backdrop filter effects.
119

120
```typescript { .api }
121
const filters: Rule<Theme>[];
122
```
123

124
**Features:**
125
- Filter effects (blur, brightness, contrast, etc.)
126
- Backdrop filter support
127
- Filter composition utilities
128

129
#### Text and Typography Rules
130

131
Text styling and typography utilities.
132

133
```typescript { .api }
134
const lineClamps: Rule<Theme>[];
135
const fontVariantNumeric: Rule<Theme>[];
136
const textTransforms: Rule<Theme>[];
137
const hyphens: Rule<Theme>[];
138
const writingModes: Rule<Theme>[];
139
const writingOrientations: Rule<Theme>[];
140
```
141

142
**Features:**
143
- Line clamping for text overflow
144
- Font variant numeric utilities
145
- Text transformation utilities
146
- Hyphenation control
147
- Writing mode and orientation
148

149
#### Interaction Rules
150

151
User interaction and accessibility utilities.
152

153
```typescript { .api }
154
const touchActions: Rule<Theme>[];
155
const scrolls: Rule<Theme>[];
156
```
157

158
**Features:**
159
- Touch action utilities for mobile interaction
160
- Scroll behavior and styling utilities
161

162
#### Static Utilities
163

164
Static utility rules for various CSS properties.
165

166
```typescript { .api }
167
const dynamicViewportHeight: Rule<Theme>[];
168
const isolations: Rule<Theme>[];
169
const mixBlendModes: Rule<Theme>[];
170
const objectPositions: Rule<Theme>[];
171
const screenReadersAccess: Rule<Theme>[];
172
```
173

174
**Features:**
175
- Dynamic viewport height utilities
176
- CSS isolation utilities
177
- Object position utilities
178
- Screen reader accessibility utilities
179
- Mix blend mode utilities
180

181
#### Variable Rules
182

183
CSS custom property utilities.
184

185
```typescript { .api }
186
const cssVariables: Rule<Theme>[];
187
```
188

189
**Features:**
190
- CSS custom property definition
191
- CSS variable utilities
192

193
#### Placeholder Rules
194

195
Input placeholder styling utilities.
196

197
```typescript { .api }
198
const placeholders: Rule<Theme>[];
199
```
200

201
**Features:**
202
- Placeholder text styling
203
- Placeholder color utilities
204

205
#### View Transition Rules
206

207
CSS View Transitions API utilities.
208

209
```typescript { .api }
210
const viewTransition: Rule<Theme>[];
211
```
212

213
**Features:**
214
- View transition utilities
215
- Transition name utilities
216

217
### Rule Composition
218

219
The rules array combines all rule categories in a specific order for proper CSS cascade:
220

221
1. CSS Variables and Properties
222
2. Layout and Positioning (Container, Displays, Positions, etc.)
223
3. Typography and Text
224
4. Colors and Backgrounds  
225
5. Effects (Filters, Shadows, etc.)
226
6. Interactions and Behaviors
227
7. Transitions and Animations
228

229
**Usage Example:**
230

231
```typescript
232
import { rules } from "@unocss/preset-wind";
233

234
// Rules are used internally by the preset
235
// Individual rule access for advanced use cases
236
const containerRules = rules.filter(rule => 
237
  rule[0] instanceof RegExp && rule[0].source.includes('container')
238
);
239
```