@unocss/preset-wind

What is @unocss/preset-wind?

@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.

What are @unocss/preset-wind's main functionalities?

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>

Other packages similar to @unocss/preset-wind

tailwindcss

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

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

@unocss/preset-wind

Tailwind / Windi CSS compact preset for UnoCSS, UnoCSS.

Installation

npm i -D @unocss/preset-wind

import presetWind from '@unocss/preset-wind'

Unocss({
  presets: [
    presetWind()
  ]
})

License

MIT License © 2021-PRESENT Anthony Fu