0
# UnoCSS Preset Attributify
1

2
UnoCSS Preset Attributify enables attributify mode for UnoCSS, allowing developers to use utility classes as HTML attributes rather than class names. This provides an alternative, more semantic syntax for applying UnoCSS utilities with improved readability and maintainability in component-based frameworks.
3

4
## Package Information
5

6
- **Package Name**: @unocss/preset-attributify
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @unocss/preset-attributify`
10

11
## Core Imports
12

13
```typescript
14
import { presetAttributify } from "@unocss/preset-attributify";
15
```
16

17
Default import:
18

19
```typescript
20
import presetAttributify from "@unocss/preset-attributify";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const presetAttributify = require("@unocss/preset-attributify");
27
```
28

29
For TypeScript types:
30

31
```typescript
32
import type { AttributifyOptions, AttributifyAttributes } from "@unocss/preset-attributify";
33
```
34

35
## Basic Usage
36

37
```typescript
38
import { defineConfig } from 'unocss'
39
import { presetAttributify } from '@unocss/preset-attributify'
40

41
export default defineConfig({
42
  presets: [
43
    presetAttributify({
44
      // Options
45
      prefix: 'un-',
46
      prefixedOnly: false,
47
      strict: false,
48
      nonValuedAttribute: true
49
    })
50
  ]
51
})
52
```
53

54
HTML usage example:
55

56
```html
57
<button
58
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
59
  text="sm white"
60
  font="mono light"
61
  p="y-2 x-4"
62
  border="2 rounded blue-200"
63
>
64
  Button
65
</button>
66
```
67

68
## Architecture
69

70
UnoCSS Preset Attributify is built around several key components:
71

72
- **Preset Function**: Main `presetAttributify` function that configures the entire attributify system
73
- **Extraction Engine**: Parses HTML attributes and converts them to UnoCSS utilities
74
- **Variant Processing**: Handles pseudo-classes, responsive breakpoints, and other variants in attribute format
75
- **Autocomplete Support**: Provides IDE/editor integration for attribute-based utilities
76
- **Type System**: Full TypeScript support for attribute names and values
77

78
## Capabilities
79

80
### Preset Configuration
81

82
Core preset function that sets up attributify mode with comprehensive configuration options.
83

84
```typescript { .api }
85
function presetAttributify(options: AttributifyOptions = {}): Preset;
86

87
interface AttributifyOptions {
88
  strict?: boolean;
89
  prefix?: string;
90
  prefixedOnly?: boolean;
91
  nonValuedAttribute?: boolean;
92
  ignoreAttributes?: string[];
93
  trueToNonValued?: boolean;
94
}
95
```
96

97
[Preset Configuration](./preset-configuration.md)
98

99
### HTML Extraction
100

101
Parses HTML attributes to extract UnoCSS utility classes from attributify syntax.
102

103
```typescript { .api }
104
function extractorAttributify(options?: AttributifyOptions): Extractor;
105

106
const defaultIgnoreAttributes: string[];
107
```
108

109
[HTML Extraction](./html-extraction.md)
110

111
### Variant Processing
112

113
Processes attributify selectors with variants like pseudo-classes and responsive breakpoints.
114

115
```typescript { .api }
116
function variantAttributify(options?: AttributifyOptions): VariantObject;
117

118
const variantsRE: RegExp;
119
```
120

121
[Variant Processing](./variant-processing.md)
122

123
### Autocomplete Support
124

125
Provides intelligent autocomplete for attributify syntax in IDEs and editors.
126

127
```typescript { .api }
128
function autocompleteExtractorAttributify(options?: AttributifyOptions): AutoCompleteExtractor;
129
```
130

131
[Autocomplete Support](./autocomplete-support.md)
132

133
### TypeScript Definitions
134

135
Type-safe attribute names and values for TypeScript and JSX usage.
136

137
```typescript { .api }
138
type AttributifyNames<Prefix extends string = ''> = 
139
  | `${Prefix}${BasicAttributes}`
140
  | `${Prefix}${PseudoPrefix}:${BasicAttributes}`;
141

142
interface AttributifyAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}
143

144
type BasicAttributes = SpecialSingleWord | TwoStringsComposition | SeparateEnabled;
145
```
146

147
[TypeScript Definitions](./typescript-definitions.md)
148

149
## Core Types
150

151
```typescript { .api }
152
interface AttributifyOptions extends PresetOptions {
153
  /** Only generate CSS for attributify or class */
154
  strict?: boolean;
155
  /** Attribute prefix */
156
  prefix?: string;
157
  /** Only match for prefixed attributes */
158
  prefixedOnly?: boolean;
159
  /** Support matching non-valued attributes */
160
  nonValuedAttribute?: boolean;
161
  /** A list of attributes to be ignored from extracting */
162
  ignoreAttributes?: string[];
163
  /** Non-valued attributes will also match if the actual value represented in DOM is true */
164
  trueToNonValued?: boolean;
165
}
166
```