Wind preset ​

The Tailwind / Windi CSS compact preset for UnoCSS.

Source Code

Installation ​

pnpm add -D @unocss/preset-wind

pnpm add -D @unocss/preset-wind

yarn add -D @unocss/preset-wind

yarn add -D @unocss/preset-wind

npm install -D @unocss/preset-wind

npm install -D @unocss/preset-wind

// uno.config.ts
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({
  presets: [
    presetWind(),
  ],
})

// uno.config.ts
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({
  presets: [
    presetWind(),
  ],
})

import { presetWind } from 'unocss'

import { presetWind } from 'unocss'

Rules ​

This preset is compatible with Tailwind CSS and Windi CSS, you can refer to their documentation for detailed usage.

For all rules and presets included in this preset, please refer to our interactive docs or directly go to the source code.

Differences from Windi CSS ​

Breakpoints ​

Bracket syntax spaces ​

This preset uses _ instead of , to respect space in bracket syntax.

Since some CSS rules require , as parts of the value, e.g. grid-cols-[repeat(3,auto)]

Experimental Features ​

Media Hover ​

Media hover addresses the sticky hover problem where tapping target that includes hover style on mobile will persist that hover style until tapping elsewhere.

Since the regular :hover style most probably used so widely, the variant uses @hover syntax to distinguish it from the regular hover pseudo.

The variant @hover-text-red will output:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgba(248, 113, 113, var(--un-text-opacity));
  }
}

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgba(248, 113, 113, var(--un-text-opacity));
  }
}

Options ​