Package Exports

@unocss/preset-attributify

Readme

@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 text="sm white" without duplicating the same prefix.

Prefix Self-referencing

For utilities like flex, grid, border, that have the utilities same as the prefix, a special ~ value is provided.

For example:

<button class="border border-red">
  Button
</button>

Can be written as

<button border="~ red">
  Button
</button>

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 />

TypeScript Support (JSX/TSX)

Create shims.d.ts with the following content:

By default, the type includes common attributes from @unocss/preset-uno. If you need custom attributes, refer to the type source to implement your own type.

Vue

Since Volar 0.36, it's now strict to unknown attributes. To opt-out, you can add the following file to your project:

// html.d.ts
declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

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

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace svelte.JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Attributify with Prefix

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // change it to your prefix

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

Credits

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

JSPM