agent-skills/skills/unocss/references/transformer-attributify-jsx.md

---
name: transformer-attributify-jsx
description: Support valueless attributify in JSX/TSX
---

# Transformer Attributify JSX

Fixes valueless attributify mode in JSX where `<div foo>` becomes `<div foo={true}>`.

## The Problem

In JSX, valueless attributes are transformed:

```jsx
// You write
<div m-2 rounded text-teal-400 />

// JSX compiles to
<div m-2={true} rounded={true} text-teal-400={true} />
```

The `={true}` breaks UnoCSS attributify detection.

## Installation

```ts
import { 
  defineConfig, 
  presetAttributify, 
  transformerAttributifyJsx 
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(),
  ],
})
```

## How It Works

The transformer converts JSX boolean attributes back to strings:

```jsx
// Input (after JSX compilation)
<div m-2={true} rounded={true} />

// Output (transformed)
<div m-2="" rounded="" />
```

Now UnoCSS can properly extract the attributify classes.

## Options

```ts
transformerAttributifyJsx({
  // Only transform specific attributes
  // Default: transforms all that match attributify patterns
  blocklist: ['text', 'font'],
})
```

## When to Use

Required when using:
- React
- Preact
- Solid
- Any JSX-based framework

With valueless attributify syntax:

```jsx
// This needs the transformer
<div flex items-center gap-4 />

// This works without transformer (has values)
<div flex="~" items="center" gap="4" />
```

## Framework Setup

### React

```ts
// vite.config.ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(), // Must be before React
    React(),
  ],
}
```

```ts
// uno.config.ts
import { 
  defineConfig, 
  presetAttributify, 
  presetWind3,
  transformerAttributifyJsx 
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(),
  ],
})
```

### Preact

Same as React, use `@preact/preset-vite` or `@prefresh/vite`.

### Solid

```ts
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS(),
    solidPlugin(),
  ],
}
```

## TypeScript Support

Add type declarations:

```ts
// shims.d.ts
import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}
```

<!-- 
Source references:
- https://unocss.dev/transformers/attributify-jsx
-->