Wind 预设

¥Wind preset

适用于 UnoCSS 的 Tailwind CSS / Windi CSS 紧凑预设。

¥The Tailwind CSS / Windi CSS compact preset for UnoCSS.

源代码

¥Source Code

信息

该预设继承了 @unocss/preset-mini。

¥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 presetWind from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

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

提示

该预设包含在 unocss 包中，你也可以从那里导入它：

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

import { presetWind } from 'unocss'

规则

¥Rules

此预设的主要目标是提供与 Tailwind CSS 和 Windi CSS 的兼容性。应该注意的是，可能无法保证完全兼容性。详细使用方法请参考他们的 文档。

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

与 Tailwind CSS 的区别

¥Differences from Tailwind CSS

引号

¥Quotes

由于提取器的工作方式，不支持在模板（要处理的文件）中使用引号。例如你将无法编写 before:content-['']。对于这些情况，你可能更愿意引入一个可以明确设置的新工具，例如 class="before:content-empty"。

¥Using quotes in the template (the files intended to be processed) is not supported due to how the extractor works. E.g. you won't be able to write before:content-['']. For these cases, you may prefer to introduce a new utility that you can explicitly set such as class="before:content-empty".

背景位置可任意设置

¥background-position with arbitrary values

Tailwind allows 使用裸语法为 background-position 使用自定义值：

¥Tailwind allows one to use custom values for background-position using the bare syntax:

<div class="bg-[center_top_1rem]">

Wind 预设将改为将 center_top_1rem 解释为颜色。使用 position: 前缀来完成相同的操作：

¥The Wind preset will instead interpret center_top_1rem as a color. Use a position: prefix to accomplish the same thing:

<div class="bg-[position:center_top_1rem]">

与 Windi CSS 的差异

¥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]

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

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

实验特点

¥Experimental Features

警告

此预设包括可能随时进行突破性更改的实验性功能。

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

由于常规 :hover 样式很可能使用得如此广泛，因此该变体使用 @hover 语法来将其与常规 hover 伪样式区分开来。

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

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

¥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

信息

该预设选项继承自 @unocss/preset-mini。

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

important

• 类型：boolean | string

  ¥Type: boolean | string

• 默认：false

  ¥Default: false

important 选项可让你控制 UnoCSS 的工具是否应标有 !important。当将 UnoCSS 与具有高特异性选择器的现有 CSS 一起使用时，这非常有用。

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

警告

使用此选项对于 UnoCSS 生成的所有工具都很重要。如果你只想将其应用于特定工具，则可以使用 important: 变体。

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

但是，在合并向元素添加内联样式的第三方 JS 库时，将 important 设置为 true 可能会带来一些问题。在这些情况下，UnoCSS 的 !important 工具会破坏内联样式，这可能会破坏你的预期设计。

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

为了解决这个问题，你可以将 important 设置为像 #app 这样的 ID 选择器：

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

uno.config.ts

import presetWind from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

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

此配置将为所有工具添加给定选择器的前缀，从而有效地提高其特异性，而无需实际将它们设置为 !important。

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

工具 dark:bg-blue 将输出：

¥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));
}