@unocss/preset-attributify

What is @unocss/preset-attributify?

@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

tailwindcss

Tailwind CSS is a utility-first CSS framework that allows you to apply styles directly in your HTML using class names. Unlike @unocss/preset-attributify, Tailwind CSS uses class-based syntax rather than attribute-based syntax.

styled-components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components, which is different from the attribute-based approach of @unocss/preset-attributify.

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides both a styled component API and a css API for applying styles. Like styled-components, it does not use attribute-based syntax but offers powerful styling capabilities.

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