@unocss/preset-wind
Advanced tools
@unocss/preset-wind is a preset for UnoCSS that provides utility-first CSS inspired by Tailwind CSS. It allows developers to use a wide range of utility classes to style their applications efficiently.
Utility Classes
This feature allows you to use utility classes to style elements. In this example, the div element is styled with a blue background, white text, padding, and rounded corners.
<div class="bg-blue-500 text-white p-4 rounded-lg">Hello, World!</div>Responsive Design
This feature provides responsive design utilities. The example shows how padding changes based on the screen size: 4 units for small screens, 8 units for medium screens, and 12 units for large screens.
<div class="p-4 md:p-8 lg:p-12">Responsive Padding</div>Hover and Focus States
This feature allows you to define styles for different states like hover and focus. The button changes its background color when hovered over or focused.
<button class="bg-green-500 hover:bg-green-700 focus:bg-green-900">Hover and Focus</button>Flexbox Utilities
This feature provides flexbox utilities to create flexible and responsive layouts. The example centers the content both horizontally and vertically within the viewport.
<div class="flex justify-center items-center h-screen">Centered Content</div>Tailwind CSS is a utility-first CSS framework that provides a wide range of utility classes to build custom designs directly in your markup. It is the inspiration behind @unocss/preset-wind and offers a similar set of functionalities.
Twind is a small, fast, and complete utility-first CSS-in-JS solution that compiles Tailwind CSS classes directly in JavaScript. It offers similar functionalities to @unocss/preset-wind but with the added benefit of being a CSS-in-JS solution.
Tailwind / Windi CSS compact preset for UnoCSS.
Please refer to the documentation.
MIT License © 2021-PRESENT Anthony Fu
FAQs
Tailwind / Windi CSS compact preset for UnoCSS
We found that @unocss/preset-wind 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
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
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.