0
# Preset Configuration
1

2
Core preset factory function that creates a complete UnoCSS preset with essential utilities and configurable options for atomic CSS generation.
3

4
## Capabilities
5

6
### Preset Mini Function
7

8
Creates the basic preset for UnoCSS with the most essential utilities, serving as the foundational building block for UnoCSS configurations.
9

10
```typescript { .api }
11
/**
12
 * The basic preset for UnoCSS, with only the most essential utilities.
13
 * @param options - Configuration options for the preset
14
 * @returns Complete UnoCSS preset configuration
15
 */
16
function presetMini(options?: PresetMiniOptions): Preset;
17

18
interface PresetMiniOptions extends PresetOptions {
19
  /** 
20
   * Dark mode options
21
   * @default 'class'
22
   */
23
  dark?: 'class' | 'media' | DarkModeSelectors;
24
  
25
  /** 
26
   * Generate tagged pseudo selector as [group=""] instead of .group
27
   * @default false
28
   */
29
  attributifyPseudo?: boolean;
30
  
31
  /** 
32
   * Prefix for CSS variables
33
   * @default 'un-'
34
   */
35
  variablePrefix?: string;
36
  
37
  /** 
38
   * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used
39
   * @default undefined
40
   */
41
  prefix?: string | string[];
42
  
43
  /** 
44
   * Generate preflight CSS reset styles
45
   * @default true
46
   */
47
  preflight?: boolean | 'on-demand';
48
  
49
  /** 
50
   * Enable arbitrary variants, for example <div class="[&>*]:m-1 [&[open]]:p-2"></div>
51
   * Disable this might slightly improve the performance
52
   * @default true
53
   */
54
  arbitraryVariants?: boolean;
55
}
56

57
interface DarkModeSelectors {
58
  /**
59
   * Selectors for light variant
60
   * @default '.light'
61
   */
62
  light?: string | string[];
63
  
64
  /**
65
   * Selectors for dark variant
66
   * @default '.dark'
67
   */
68
  dark?: string | string[];
69
}
70
```
71

72
**Usage Examples:**
73

74
```typescript
75
import { defineConfig } from "unocss";
76
import { presetMini } from "@unocss/preset-mini";
77

78
// Basic usage with defaults
79
export default defineConfig({
80
  presets: [presetMini()]
81
});
82

83
// Custom configuration
84
export default defineConfig({
85
  presets: [
86
    presetMini({
87
      dark: 'media', // Use media queries for dark mode
88
      variablePrefix: 'app-', // Custom CSS variable prefix
89
      prefix: 'u-', // Custom utility prefix
90
      preflight: false, // Disable CSS reset
91
      arbitraryVariants: false, // Disable arbitrary variants for performance
92
    })
93
  ]
94
});
95

96
// Custom dark mode selectors
97
export default defineConfig({
98
  presets: [
99
    presetMini({
100
      dark: {
101
        light: ['.light-theme', '[data-theme="light"]'],
102
        dark: ['.dark-theme', '[data-theme="dark"]'],
103
      }
104
    })
105
  ]
106
});
107
```
108

109
### Default Export
110

111
The preset function is also available as the default export for convenience.
112

113
```typescript { .api }
114
const presetMini: (options?: PresetMiniOptions) => Preset;
115
export default presetMini;
116
```
117

118
### CSS Variable Prefix Postprocessor
119

120
Creates a postprocessor to transform CSS variable prefixes from the default `--un-` to a custom prefix.
121

122
```typescript { .api }
123
/**
124
 * Creates a postprocessor to transform CSS variable prefixes
125
 * @param prefix - The custom prefix to use instead of 'un-'
126
 * @returns Postprocessor function or undefined if prefix is 'un-'
127
 */
128
function VarPrefixPostprocessor(prefix: string): Postprocessor | undefined;
129
```
130

131
**Usage Example:**
132

133
```typescript
134
import { VarPrefixPostprocessor } from "@unocss/preset-mini";
135

136
// This is used internally by presetMini when variablePrefix option is set
137
const postprocessor = VarPrefixPostprocessor('app-');
138
// Transforms --un-bg-opacity to --app-bg-opacity
139
```
140

141
## Configuration Options Details
142

143
### Dark Mode Configuration
144

145
The `dark` option controls how dark mode variants are generated:
146

147
- `'class'` (default): Uses `.dark` class selector for dark mode utilities
148
- `'media'`: Uses `@media (prefers-color-scheme: dark)` media query
149
- `DarkModeSelectors`: Custom selectors for light and dark variants
150

151
### Preflight Configuration
152

153
The `preflight` option controls CSS reset generation:
154

155
- `true` (default): Includes complete CSS reset styles
156
- `false`: No preflight styles are generated
157
- `'on-demand'`: Only generates preflight styles for actively used properties
158

159
### Arbitrary Variants
160

161
When `arbitraryVariants` is enabled (default), you can use complex selectors:
162

163
```html
164
<!-- Target direct children -->
165
<div class="[&>*]:margin-1">
166
  <p>Child with margin</p>
167
</div>
168

169
<!-- Target specific states -->
170
<details class="[&[open]]:padding-2">
171
  Content with conditional padding
172
</details>
173
```
174

175
### Variable and Utility Prefixes
176

177
- `variablePrefix`: Changes CSS custom property prefix (e.g., `--un-` to `--app-`)
178
- `prefix`: Adds prefix to utility classes (e.g., `m-4` becomes `u-m-4`)