1---
2name: transformer-attributify-jsx
3description: Support valueless attributify in JSX/TSX
4---
5 
6# Transformer Attributify JSX
7 
8Fixes valueless attributify mode in JSX where `<div foo>` becomes `<div foo={true}>`.
9 
10## The Problem
11 
12In JSX, valueless attributes are transformed:
13 
14```jsx
15// You write
16<div m-2 rounded text-teal-400 />
17 
18// JSX compiles to
19<div m-2={true} rounded={true} text-teal-400={true} />
20```
21 
22The `={true}` breaks UnoCSS attributify detection.
23 
24## Installation
25 
26```ts
27import { 
28  defineConfig, 
29  presetAttributify, 
30  transformerAttributifyJsx 
31} from 'unocss'
32 
33export default defineConfig({
34  presets: [
35    presetAttributify(),
36  ],
37  transformers: [
38    transformerAttributifyJsx(),
39  ],
40})
41```
42 
43## How It Works
44 
45The transformer converts JSX boolean attributes back to strings:
46 
47```jsx
48// Input (after JSX compilation)
49<div m-2={true} rounded={true} />
50 
51// Output (transformed)
52<div m-2="" rounded="" />
53```
54 
55Now UnoCSS can properly extract the attributify classes.
56 
57## Options
58 
59```ts
60transformerAttributifyJsx({
61  // Only transform specific attributes
62  // Default: transforms all that match attributify patterns
63  blocklist: ['text', 'font'],
64})
65```
66 
67## When to Use
68 
69Required when using:
70- React
71- Preact
72- Solid
73- Any JSX-based framework
74 
75With valueless attributify syntax:
76 
77```jsx
78// This needs the transformer
79<div flex items-center gap-4 />
80 
81// This works without transformer (has values)
82<div flex="~" items="center" gap="4" />
83```
84 
85## Framework Setup
86 
87### React
88 
89```ts
90// vite.config.ts
91import React from '@vitejs/plugin-react'
92import UnoCSS from 'unocss/vite'
93 
94export default {
95  plugins: [
96    UnoCSS(), // Must be before React
97    React(),
98  ],
99}
100```
101 
102```ts
103// uno.config.ts
104import { 
105  defineConfig, 
106  presetAttributify, 
107  presetWind3,
108  transformerAttributifyJsx 
109} from 'unocss'
110 
111export default defineConfig({
112  presets: [
113    presetWind3(),
114    presetAttributify(),
115  ],
116  transformers: [
117    transformerAttributifyJsx(),
118  ],
119})
120```
121 
122### Preact
123 
124Same as React, use `@preact/preset-vite` or `@prefresh/vite`.
125 
126### Solid
127 
128```ts
129import UnoCSS from 'unocss/vite'
130import solidPlugin from 'vite-plugin-solid'
131 
132export default {
133  plugins: [
134    UnoCSS(),
135    solidPlugin(),
136  ],
137}
138```
139 
140## TypeScript Support
141 
142Add type declarations:
143 
144```ts
145// shims.d.ts
146import type { AttributifyAttributes } from '@unocss/preset-attributify'
147 
148declare module 'react' {
149  interface HTMLAttributes<T> extends AttributifyAttributes {}
150}
151```
152 
153<!-- 
154Source references:
155- https://unocss.dev/transformers/attributify-jsx
156-->
157