@unocss/preset-attributify
Advanced tools
Package description
@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.
Readme
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
Unknown package
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 0 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
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.