Wind 预设 ​

用于 UnoCSS 的 TailWind/Windi CSS 预设。

源码

安装 ​

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'

规则 ​

该预设与 Tailwind CSS 和 Windi CSS 兼容，您可以参考它们的 文档 获取详细的使用信息。

有关此预设中包含的所有规则和预设，请参见我们的交互式文档或直接转到源码。

与 Windi CSS 的不同之处 ​

断点 ​

方括号语法中的空格 ​

该预设使用 _ 而不是 , 来表示方括号语法中的空格。

由于某些 CSS 规则需要 , 作为值的一部分，例如 grid-cols-[repeat(3,auto)]。

实验性特性 ​

媒体悬停 ​

媒体悬停解决了移动端触摸包含悬停样式的目标后，悬停样式将一直持续到其他地方触摸的粘滞悬停问题。

由于常规的 :hover 样式可能被广泛使用，该变体使用 @hover 语法来区别于常规的 hover 伪类。

变体 @hover-text-red 将输出：

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