Wind preset

The Tailwind CSS / Windi CSS compact preset for UnoCSS.

Source Code

INFO

This preset inherits @unocss/preset-mini.

Installation

pnpm

pnpm add -D @unocss/preset-wind

yarn

yarn add -D @unocss/preset-wind

npm

npm install -D @unocss/preset-wind

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

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

TIP

This preset is included in the unocss package, you can also import it from there:

import { presetWind } from 'unocss'

Rules

The primary goal of this preset is to provide compatibility with Tailwind CSS and Windi CSS. It should be noted that complete compatibility may not be guaranteed. Please 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 Tailwind CSS

Quotes

Using quotes in the template (the files intended to be processed) is not supported due to how the extractor works.

Differences from Windi CSS

Breakpoints

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

Bracket syntax spaces

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

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

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

Experimental Features

WARNING

This preset includes experimental features that may be changed in breaking ways at any time.

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: rgb(248 113 113 / var(--un-text-opacity));
  }
}

Options

INFO

This preset options are inherited from @unocss/preset-mini.

important

• Type: boolean | string
• Default: false

The important option lets you control whether UnoCSS's utilities should be marked with !important. This can be really useful when using UnoCSS with existing CSS that has high specificity selectors.

WARNING

Using this option will apply important to all utilities generated by UnoCSS. You can use important: variant instead if you mean to apply it to specific utilities only.

However, setting important to true can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements. In those cases, UnoCSS's !important utilities defeat the inline styles, which can break your intended design.

To get around this, you can set important to an ID selector like #app instead:

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

export default defineConfig({
  presets: [
    presetWind({
      important: '#app',
    }),
  ],
})

This configuration will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them !important.

The utility dark:bg-blue will output:

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}