@unocss/transformer-directives
Advanced tools
Package description
@unocss/transformer-directives is a transformer for UnoCSS that allows you to use CSS directives within your stylesheets. It provides a way to use utility-first CSS directly in your stylesheets, making it easier to manage and apply styles dynamically.
Using @apply directive
The @apply directive allows you to apply multiple utility classes to a single CSS rule. This makes it easier to manage and reuse styles across your project.
/* styles.css */
.button {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}Using @screen directive
The @screen directive allows you to apply styles based on breakpoints. This is useful for creating responsive designs that adapt to different screen sizes.
/* styles.css */
@screen md {
.container {
@apply p-4;
}
}Using @variants directive
The @variants directive allows you to apply styles based on different states like hover, focus, etc. This is useful for creating interactive elements that change styles based on user interactions.
/* styles.css */
@variants hover, focus {
.button {
@apply bg-blue-700;
}
}Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. It also supports directives like @apply, @screen, and @variants, making it similar to @unocss/transformer-directives. However, Tailwind CSS is a full-fledged framework, whereas @unocss/transformer-directives is a transformer for UnoCSS.
PostCSS is a tool for transforming CSS with JavaScript plugins. It can be used to create custom directives and utilities similar to those provided by @unocss/transformer-directives. However, PostCSS is more general-purpose and requires additional configuration and plugins to achieve similar functionality.
WindiCSS is a utility-first CSS framework inspired by Tailwind CSS. It offers similar functionalities like utility classes and directives. WindiCSS is designed to be faster and more efficient, making it a good alternative to @unocss/transformer-directives for projects that require high performance.
Readme
UnoCSS transformer for @apply directive
npm i -D @unocss/transformer-directives
import Unocss from 'unocss/vite'
import transformerDirective from '@unocss/transformer-directives'
Unocss({
transformers: [
transformerDirective(),
]
})
Currently only @apply is supported.
MIT License © 2022 hannoeru
FAQs
Unknown package
We found that @unocss/transformer-directives 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.