@unocss/preset-wind
Advanced tools
Package description
@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.
Windi CSS is a next-generation utility-first CSS framework that is highly inspired by Tailwind CSS. It offers faster build times and on-demand utility generation, making it a strong alternative to @unocss/preset-wind.
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.
Readme
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
The npm package @unocss/preset-wind receives a total of 229,840 weekly downloads. As such, @unocss/preset-wind popularity was classified as popular.
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.