风预设

UnoCSS 的 Tailwind CSS / Windi CSS 精简预设。

源代码

信息

此预设继承 @unocss/preset-mini。

安装

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 包中，您也可以从那里导入它。

import { presetWind } from 'unocss'

规则

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

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

与 Tailwind CSS 的差异

引号

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

具有任意值的 background-position

Tailwind 允许 使用裸语法为 background-position 使用自定义值。

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

相反，风预设将 center_top_1rem 解释为颜色。使用 position: 前缀来实现相同的效果。

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

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

选项

信息

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

important

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

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

警告

使用此选项将对 UnoCSS 生成的所有实用程序应用 important。如果您想仅将其应用于特定实用程序，可以使用 important: 变体。

但是，将 important 设置为 true 会在结合使用向您的元素添加内联样式的第三方 JS 库时遇到一些问题。在这些情况下，UnoCSS 的 !important 实用程序会胜过内联样式，这会导致您预期的设计出现问题。

要解决此问题，您可以将 important 设置为 ID 选择器，例如 #app

uno.config.ts

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

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