1---
2name: preset-attributify
3description: Group utilities in HTML attributes instead of class
4---
5 
6# Preset Attributify
7 
8Group utilities in HTML attributes for better readability.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetAttributify, presetWind3 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind3(),
18    presetAttributify(),
19  ],
20})
21```
22 
23## Basic Usage
24 
25Instead of long class strings:
26 
27```html
28<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200">
29  Button
30</button>
31```
32 
33Group by prefix in attributes:
34 
35```html
36<button
37  bg="blue-400 hover:blue-500"
38  text="sm white"
39  font="mono light"
40  p="y-2 x-4"
41  border="2 rounded blue-200"
42>
43  Button
44</button>
45```
46 
47## Prefix Self-Referencing
48 
49For utilities matching their prefix (`flex`, `grid`, `border`), use `~`:
50 
51```html
52<!-- Before -->
53<button class="border border-red">Button</button>
54 
55<!-- After -->
56<button border="~ red">Button</button>
57```
58 
59## Valueless Attributify
60 
61Use utilities as boolean attributes:
62 
63```html
64<div m-2 rounded text-teal-400 />
65```
66 
67## Handling Property Conflicts
68 
69When attribute names conflict with HTML properties:
70 
71```html
72<!-- Use un- prefix -->
73<a un-text="red">Text color to red</a>
74```
75 
76### Enforce Prefix
77 
78```ts
79presetAttributify({
80  prefix: 'un-',
81  prefixedOnly: true,
82})
83```
84 
85## Options
86 
87```ts
88presetAttributify({
89  strict: false,           // Only generate CSS for attributify
90  prefix: 'un-',           // Attribute prefix
91  prefixedOnly: false,     // Require prefix for all
92  nonValuedAttribute: true, // Support valueless attributes
93  ignoreAttributes: [],    // Attributes to ignore
94  trueToNonValued: false,  // Treat value="true" as valueless
95})
96```
97 
98## TypeScript Support
99 
100### Vue 3
101 
102```ts
103// html.d.ts
104declare module '@vue/runtime-dom' {
105  interface HTMLAttributes { [key: string]: any }
106}
107declare module '@vue/runtime-core' {
108  interface AllowedComponentProps { [key: string]: any }
109}
110export {}
111```
112 
113### React
114 
115```ts
116import type { AttributifyAttributes } from '@unocss/preset-attributify'
117 
118declare module 'react' {
119  interface HTMLAttributes<T> extends AttributifyAttributes {}
120}
121```
122 
123## JSX Support
124 
125For JSX where `<div foo>` becomes `<div foo={true}>`:
126 
127```ts
128import { transformerAttributifyJsx } from 'unocss'
129 
130export default defineConfig({
131  transformers: [
132    transformerAttributifyJsx(),
133  ],
134})
135```
136 
137**Important:** Only use attributify if `uno.config.*` shows `presetAttributify()` is enabled.
138 
139<!-- 
140Source references:
141- https://unocss.dev/presets/attributify
142-->
143