0
# Preset Configuration
1

2
Core preset function that sets up attributify mode with comprehensive configuration options for UnoCSS.
3

4
## Capabilities
5

6
### Main Preset Function
7

8
Creates and configures the UnoCSS preset for attributify mode.
9

10
```typescript { .api }
11
/**
12
 * Creates a UnoCSS preset that enables attributify mode
13
 * @param options - Configuration options for the preset
14
 * @returns UnoCSS preset configuration object
15
 */
16
function presetAttributify(options: AttributifyOptions = {}): Preset;
17

18
/**
19
 * Default export - same as presetAttributify
20
 */
21
const presetAttributify: (options: AttributifyOptions = {}) => Preset;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { defineConfig } from 'unocss'
28
import { presetAttributify } from '@unocss/preset-attributify'
29

30
// Basic usage with defaults
31
export default defineConfig({
32
  presets: [
33
    presetAttributify()
34
  ]
35
})
36

37
// With custom options
38
export default defineConfig({
39
  presets: [
40
    presetAttributify({
41
      prefix: 'ui-',
42
      prefixedOnly: true,
43
      strict: false,
44
      nonValuedAttribute: true,
45
      ignoreAttributes: ['placeholder', 'alt'],
46
      trueToNonValued: false
47
    })
48
  ]
49
})
50
```
51

52
### Configuration Options
53

54
All configuration options for customizing attributify behavior.
55

56
```typescript { .api }
57
interface AttributifyOptions extends PresetOptions {
58
  /**
59
   * Only generate CSS for attributify or class
60
   * When true, utilities will only be generated from attributify syntax, not regular classes
61
   * @default false
62
   */
63
  strict?: boolean;
64

65
  /**
66
   * Prefix for attribute names
67
   * All attributify attributes must start with this prefix
68
   * @default 'un-'
69
   */
70
  prefix?: string;
71

72
  /**
73
   * Only match for prefixed attributes
74
   * When true, only attributes starting with the prefix will be processed
75
   * @default false
76
   */
77
  prefixedOnly?: boolean;
78

79
  /**
80
   * Support matching non-valued attributes
81
   * Allows attributes without values (e.g., <div mt-2 />)
82
   * @default true
83
   */
84
  nonValuedAttribute?: boolean;
85

86
  /**
87
   * A list of attributes to be ignored from extracting
88
   * These attributes will not be processed as utilities
89
   */
90
  ignoreAttributes?: string[];
91

92
  /**
93
   * Non-valued attributes will also match if the actual value represented in DOM is true
94
   * This option exists for supporting frameworks that encode non-valued attributes as true
95
   * Enabling this option will break rules that end with 'true'
96
   * @default false
97
   */
98
  trueToNonValued?: boolean;
99
}
100
```
101

102
**Configuration Examples:**
103

104
```typescript
105
// Strict mode - only process attributify, not regular classes
106
presetAttributify({
107
  strict: true
108
})
109

110
// Custom prefix
111
presetAttributify({
112
  prefix: 'tw-',
113
  prefixedOnly: true  // Only process attributes starting with 'tw-'
114
})
115

116
// Custom ignored attributes
117
presetAttributify({
118
  ignoreAttributes: ['placeholder', 'fill', 'opacity', 'data-testid']
119
})
120

121
// Framework compatibility
122
presetAttributify({
123
  trueToNonValued: true  // For frameworks that set boolean attributes to "true"
124
})
125
```
126

127
### Default Values
128

129
The preset applies these default values in the main preset function:
130

131
```typescript { .api }
132
// Applied by the main preset function
133
const PRESET_DEFAULTS = {
134
  strict: false,
135
  prefix: 'un-',
136
  prefixedOnly: false,
137
  nonValuedAttribute: true,
138
  ignoreAttributes: defaultIgnoreAttributes
139
  // Note: trueToNonValued has no default in preset function,
140
  // but individual functions default it to false
141
}
142
```
143

144
### Preset Return Value
145

146
The preset function returns a complete UnoCSS preset configuration:
147

148
```typescript { .api }
149
interface Preset {
150
  name: '@unocss/preset-attributify';
151
  enforce: 'post';
152
  variants: VariantObject[];
153
  extractors: Extractor[];
154
  options: AttributifyOptions;
155
  autocomplete: {
156
    extractors: AutoCompleteExtractor[];
157
  };
158
  extractorDefault?: false;
159
}
160
```
161

162
**Example Return Structure:**
163

164
```typescript
165
{
166
  name: '@unocss/preset-attributify',
167
  enforce: 'post',
168
  variants: [variantAttributify(options)],
169
  extractors: [extractorAttributify(options)],
170
  options: resolvedOptions,
171
  autocomplete: {
172
    extractors: [autocompleteExtractorAttributify(options)]
173
  },
174
  extractorDefault: options.strict ? false : undefined
175
}
176
```