@unocss/preset-attributify
Advanced tools
@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.
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>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 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 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.
Attributify Mode for UnoCSS.
Please refer to the documentation.
Initial idea by @Tahul and @antfu. Prior implementation in Windi CSS by @voorjaar.
MIT License © 2021-PRESENT Anthony Fu
FAQs
Attributify preset for UnoCSS
The npm package @unocss/preset-attributify receives a total of 145,119 weekly downloads. As such, @unocss/preset-attributify popularity was classified as popular.
We found that @unocss/preset-attributify demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.