@unocss/preset-attributify is a preset for UnoCSS that allows you to use attribute-based syntax for styling your HTML elements. This makes it easier to apply styles directly within your HTML tags, similar to how you might use inline styles, but with the power and flexibility of UnoCSS.

What are @unocss/preset-attributify's main functionalities?

Basic Styling

You can apply basic styles like text alignment, background color, and padding directly as attributes on your HTML elements.

<div text='center' bg='blue-500' p='4'>Hello World</div>

Responsive Design

You can use responsive design attributes to change styles based on different screen sizes.

<div sm:text='left' md:text='center' lg:text='right'>Responsive Text</div>

State Variants

You can apply styles for different states like hover and active using attribute-based syntax.

<button hover:bg='green-500' active:bg='green-700'>Click Me</button>

Utility Classes

You can use utility classes for layout and spacing directly as attributes.

<div flex='~ col' gap='4'>Flexbox Layout</div>

Other packages similar to @unocss/preset-attributify

Readme

Source

@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

FAQs

What is @unocss/preset-attributify?

Is @unocss/preset-attributify popular?

Is @unocss/preset-attributify well maintained?

Last updated on 28 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install