README.md

@unocss/transformer-attributify-jsx

happy play with preset-attributify in jsx/tsx

Install

npm i -D @unocss/transformer-attributify-jsx

// uno.config.js
import {defineConfig} from 'unocss'
import transformerAttributifyJsx from "@unocss/transformer-attributify-jsx"
import {presetAttributify} from "unocss/src";

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

Notice

⚠️ The rules are almost the same as those of preset-attributify, but there are several precautions

<div translate-x-100% /> // cannot end with `%`
<div hover:text-2xl /> // cannot contain `:`
<div translate-x-[100px] /> // cannot contain `[` or `]`

Usage

<div text-5xl animate-bounce>
  unocss
</div>

Will be compiled to:

<div text-5xl="" animate-bounce="">
    unocss
</div>

License

MIT License © 2021-PRESENT Anthony Fu