Wind3 预设

🌐 Wind3 preset

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

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

源代码

INFO

@unocss/preset-wind 和 @unocss/preset-uno 已被弃用，重命名为 @unocss/preset-wind3。此预设继承自 @unocss/preset-mini。

安装

🌐 Installation

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

uno.config.ts

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

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

TIP

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

import { presetWind3 } 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.

有关本预设中包含的所有规则和预设，请参阅我们的 互动文档 或直接访问 源代码。

特性

🌐 Features

夜间模式

🌐 Dark mode

默认情况下，此预设会生成基于类的夜间模式，并使用 dark: 变体。

🌐 By default, this preset generates class-based dark mode with dark: variant.

<div class="dark:bg-red:10" />

将生成：

🌐 will generate:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

基于媒体查询的夜间模式

🌐 Media query based dark mode

要改为在全局使用基于媒体查询的夜间模式，你可以更改 dark: 变体的配置：

🌐 To instead use media query based dark mode globally you can change the config for the dark: variant:

presetWind3({
  dark: 'media'
})

现在

🌐 Now

<div class="dark:bg-red:10" />

将生成：

🌐 will generate:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

基于媒体查询的选择加入夜间模式

🌐 Opt-in media query based dark mode

要使用基于选择加入的媒体查询的夜间模式，你可以使用 @dark: 变体：

🌐 To use opt-in media query based dark mode, you can use the @dark: variant:

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

与 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 允许 使用裸语法为 background-position 设置自定义值：

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

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

样式预设会将 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]"></div>

动画

🌐 Animates

Tailwind CSS 内置的动画较少，我们完全支持其动画规则，并在内部集成了 Animate.css 来提供更多动画效果。

🌐 Tailwind CSS has fewer built-in animations, we fully support its animation rules, and internally integrate Animate.css to provide more animation effects.

你可以使用 animate- 前缀来引导 IntelliSense 快速找到你需要的动画。

🌐 You can use the animate- prefix to guide IntelliSense to find the animation you need quickly.

TIP

我们不会合并 Tailwind 和 Animate.css 中冲突的动画名称。如果你需要使用 Animate.css 的动画名称，请使用 animate-<name>-alt。

例如

🌐 For example

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

如果你想自定义或修改动画效果，我们提供高度可定制的配置项。你可以通过配置项修改动画的持续时间、延迟、速度曲线等。

🌐 If you want to customize or modify the animation effect, we provide highly customizable configuration items. You can modify the duration, delay, speed curve, etc. of the animation through the configuration item.

uno.config.ts

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

预览自定义动画：

🌐 Preview the custom animation:

自定义动画

TIP

你也可以将 category 添加到动画组中以便更好地管理。这将使下游工具更容易使用动画效果。

uno.config.ts

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

与 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

WARNING

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

媒体悬停

🌐 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

INFO

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

important

• 类型: boolean | string
• 默认: 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.

WARNING

使用此选项将把重要性应用到 UnoCSS 生成的所有工具类。如果你只想将其应用到特定工具类，可以改用 important: 变体。

然而，将 important 设置为 true 在使用第三方 JS 库给元素添加内联样式时可能会引发一些问题。在这些情况下，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 presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      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));
}