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

Documentation

Please refer to the documentation.

Credits

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

License

MIT License © 2021-PRESENT Anthony Fu