Wind3 预设

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

源代码

信息

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

安装

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(),
  ],
})

提示

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

import { presetWind3 } from 'unocss'

规则

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

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

功能

深色模式

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

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

将生成：

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

基于媒体查询的深色模式

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

presetWind3({
  dark: 'media'
})

现在

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

将生成：

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

选择加入基于媒体查询的深色模式

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

<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 的差异

引号

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

带有任意值的 background-position

Tailwind 允许 用户使用简洁语法为 background-position 指定自定义值：

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

Wind 预设会将 center_top_1rem 解释为一种颜色。请使用 position: 前缀来实现相同的效果：

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

动画效果

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

你可以使用 animate- 前缀来引导智能感知（IntelliSense）快速找到你需要的动画。

提示

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

例如

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

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

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',
      },
    }
  }
})

预览自定义动画：

animate-custom

提示

你还可以添加 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 的差异

断点

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

方括号语法中的空格

此预设在方括号语法中使用 _ 而非 , 来保留空格。

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

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

Options

信息

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

important

• 类型: boolean | string
• 默认值: false

important 选项可让你控制 UnoCSS 的工具类是否应标记为 !important。在将 UnoCSS 与具有高优先级选择器的现有 CSS 一起使用时，这非常有用。

警告

使用此选项将为 UnoCSS 生成的所有工具类应用 !important。如果你只想将 !important 应用于特定的工具类，可以使用 important: 变体。

然而，当引入会为元素添加内联样式的第三方 JavaScript 库时，将 important 设置为 true 可能会引发一些问题。在这些情况下，UnoCSS 带有 !important 的工具类会覆盖内联样式，这可能会破坏你预期的设计。

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

uno.config.ts

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

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

此配置将使用给定的选择器为所有工具类添加前缀，在不实际使用 !important 的情况下有效提高其优先级。

工具类 dark:bg-blue 将输出：

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