@unocss/preset-attributify

@unocss/preset-attributify

Attributify Mode for UnoCSS.

Installation

npm i -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

Unocss({
  presets: [
    presetAttributify({ /* options */ })
    // ...other presets
  ]
})

Attributify Mode

This preset enabled Windi CSS's Attributify Mode for other presets.

Imagine you have this button using Tailwind's utilities. When the list gets long, it becomes really hard to read and maintain.

<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 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

With attributify mode, you can separate utilities into attributes:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

For example, text-sm text-white could be grouped into test="sm white" without duplicating the same prefix.

Valueless Attributify

In addition to Windi CSS's Attributify Mode, this presets also supports valueless attributes.

For example,

<div class="m-2 rounded text-teal-400" />

now can be

<div m-2 rounded text-teal-400 />

Credits

Initial idea by @Tahul and @antfu. Pior implementation in Windi CSS by @voorjaar.

License

MIT License © 2021-PRESENT Anthony Fu