babel-plugin-attributify-jsx

Support JSX valueless attributify

() => (
  <div flex px text-4xl animate-spin>
  </div>
)

Will be transformed to:

() => (
  <div flex="" px="" text-4xl="" animate-spin="">
  </div>
)

Without this transformer

React's JSX trasnformer by default will treat valueless attributes as boolean attributes.

() => (
  <div flex={true} px={true} text-4xl={true} animate-spin={true}>
  </div>
)

Install

npm i -D babel-plugin-attributify-jsx

// vite.config.js
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-attributify-jsx"],
      },
    }),
  ],
});

Caveats

⚠️ Because of the JSX rule, attribute name can't contain [ ] : %, so there are several restriction when using

<div translate-x-100% /> <!-- cannot end with `%` -->

<div hover:text-2xl /> <!-- cannot contain `:` -->

<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->

Instead, you may want to use valued attributes instead:

<div translate="x-100%" />

<div hover="text-2xl" />

<div translate="x-[100px]" />