Wind4 预设

用于 UnoCSS 的 Tailwind4 CSS 紧凑预设。它与 PresetWind3 的所有功能兼容，并进一步增强。

TIP

您可以花一点时间阅读本文档以了解更改

安装

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-wind4

bash

yarn add -D @unocss/preset-wind4

bash

npm install -D @unocss/preset-wind4

bash

bun add -D @unocss/preset-wind4

uno.config.ts

import presetWind4
 from '@unocss/preset-wind4'
import { defineConfig
 } from 'unocss'

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

兼容性

请参考 Tailwind 兼容性了解浏览器支持和兼容性。

主题

PresetWind4 的主题几乎与 PresetWind3 的主题相同，但某些主题键已进行了调整。

WARNING

请注意在切换到 PresetWind4 时，参阅下表检查您的主题键配置并进行适当的调整。

PresetWind3	PresetWind4
`fontFamily`	`font`
`fontSize`	移至 `text` 中的 `fontSize` 属性
`lineHeight`	移至 `text` 中的 `lineHeight` 属性或使用 `leading`
`letterSpacing`	移至 `text` 中的 `letterSpacing` 属性或使用 `tracking`
`borderRadius`	`radius`
`easing`	`ease`
`breakpoints`	`breakpoint`
`verticalBreakpoints`	`verticalBreakpoint`
`boxShadow`	`shadow`
-	`insetShadow`
像 `width`, `height`, `maxWidth`, `maxHeight`, `minWidth`, `minHeight` 这样的尺寸属性	统一为使用 `spacing`
`transitionProperty`	`property`
`gridAutoColumn`, `gridAutoRow`, `gridColumn`, `gridRow`, `gridTemplateColumn`, `gridTemplateRow`	-
`container.maxWidth`	`containers.maxWidth`
-	`defaults`

`Theme.defaults`

Theme.defaults 是一个全局默认主题配置，将应用于 reset 样式或作为某些规则的默认值。

以下是 Theme.defaults 的默认值，您可以在主题配置中覆盖它们。

点击查看默认值

uno.config.ts

import type { Theme
 } from '@unocss/preset-wind4/theme'

export const defaults
: Theme
['default'] = {
  transition
: {
    duration
: '150ms',
    timingFunction
: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font
: {
    family
: 'var(--font-sans)',
    featureSettings
: 'var(--font-sans--font-feature-settings)',
    variationSettings
: 'var(--font-sans--font-variation-settings)',
  },
  monoFont
: {
    family
: 'var(--font-mono)',
    featureSettings
: 'var(--font-mono--font-feature-settings)',
    variationSettings
: 'var(--font-mono--font-variation-settings)',
  },
}

选项

PresetWind4 的基本配置与 PresetWind3 类似，但有以下重要更改。

Preflights

我们在 PresetWind4 中添加了 preflights 配置选项，以控制是否启用预设样式。

Reset

在 PresetWind4 中，我们使重置样式与 tailwind4 对齐并进行了内部集成。您无需安装任何额外的 CSS 重置包，如 @unocss/reset 或 normalize.css。

main.ts

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

您只需通过开关控制是否启用重置样式：

uno.config.ts

import presetWind4
 from '@unocss/preset-wind4'
import { defineConfig
 } from 'unocss'

export default defineConfig
({
  presets
: [
    presetWind4
({
      preflights
: { 
        reset
: true, 
      } 
    }),
  ],
})

主题

选择如何生成主题 CSS 变量。

模式

安装了 presetWind4 的 UnoCSS 引擎会在解析工具时自动收集主题的依赖关系，并在最后生成 CSS 变量。

true: 完全生成主题键。
false: 禁用主题键。 (不推荐 ⚠️)
'on-demand': 仅在使用时生成主题键。-> ✅ (默认)

uno.config.ts

import { defineConfig
, presetWind4
 } from 'unocss'

export default defineConfig
({
  presets
: [
    presetWind4
({
      preflights
: { 
        theme
: true, 
      }, 
    }),
  ],
})

处理

您可以进一步控制主题变量的输出。例如，如果您想将 rem 转换为 px 的主题变量，我们提供了 createRemToPxProcessor 函数来处理您的主题变量。

uno.config.ts

import { createRemToPxProcessor
 } from '@unocss/preset-wind4/utils'
import { defineConfig
, presetWind4
 } from 'unocss'

export default defineConfig
({
  presets
: [
    presetWind4
({
      preflights
: { 
        theme
: { 
          mode
: 'on-demand', // 默认为 'on-demand'
          process
: createRemToPxProcessor
(), 
        } 
      }, 
    }),
  ],
})

顺便说一下，如果您想使用 presetRemToPx 预设将 rem 转换为 px，您不再需要单独导入这个预设，因为 presetWind4 已经在内部提供了这个功能。

uno.config.ts

import { createRemToPxProcessor
 } from '@unocss/preset-wind4/utils'
import { defineConfig
, presetWind4
 } from 'unocss'

export default defineConfig
({
  presets
: [
    presetWind4
({
      preflights
: { 
        theme
: { 
          process
: createRemToPxProcessor
(), 
        } 
      }, 
    }),
  ],
  postprocess
: [createRemToPxProcessor
()], 
})

生成的 CSS

在 PresetWind4 的输出中，新增了三个层：base、theme 和 properties。

层名称	描述	顺序
`properties`	由`@property`定义的CSS属性	-200
`theme`	与主题相关的CSS变量	-150
`base`	基础的预飞行/重置样式	-100

`properties` 层

我们在许多规则中使用 @property 来定义 CSS 属性，以实现更好的性能和更小的体积。

例如，常用的实用程序如 text-op-xx、bg-op-xx 等。

css

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

`theme` 层

我们将与主题相关的 CSS 变量放在 theme 层中，以便您更容易覆盖和直接使用。它可以是全面的或按需的。它始终来自您的主题配置。

INFO

生成的键名称可能与 Tailwind4 的不完全相同。我们尽量避免在主题中对键名称进行重大更改，以尊重从 presetWind3 迁移的用户。您还可以在 Preflights 主题处理中自定义想要的输出。

css

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

与其他预设的兼容性

PresetWind4 在增强和兼容 PresetWind3 的基础上进行。由于其他包最初是为 PresetWind3 开发的，在一起使用时可能会出现一些问题。已知问题包括：

presetRemToPx

在 PresetWind4 中，不再需要 presetRemToPx，因为它已在内部包含。您可以将其从配置中删除。

请参考选项中的 process。

presetWebFonts

当将 presetWebFonts 与 PresetWind4 一起使用时，不再支持 fontFamily 主题键。请做以下调整：

uno.config.ts

import { defineConfig
, presetWebFonts
, presetWind4
 } from 'unocss'

export default defineConfig
({
  presets
: [
    presetWind4
(),
    presetWebFonts
({
      themeKey
: 'font', 
    }),
  ],
})

presetLegacyCompat

在 presetWind4 中，我们使用 oklch 颜色模型以支持更好的颜色对比和颜色感知。因此，它与 presetLegacyCompat 不兼容，不推荐一起使用。

请参阅兼容性部分以获取更多信息。

transformDirectives

transformDirectives 在 PresetWind4 中效果不佳。有一些已知问题，因此请谨慎使用。

WARNING

使用 @apply 处理带有 @property 的规则时，可能会出现不同层级之间的冲突。

Wind4 预设 ​

安装 ​

兼容性 ​

主题 ​

Theme.defaults ​

选项 ​

Preflights ​

Reset ​

主题 ​

模式 ​

处理 ​

生成的 CSS ​

properties 层 ​

theme 层 ​

与其他预设的兼容性 ​

presetRemToPx ​

presetWebFonts ​

presetLegacyCompat ​

transformDirectives ​

Wind4 预设

安装

兼容性

主题

`Theme.defaults`

选项

Preflights

Reset

主题

模式

处理

生成的 CSS

`properties` 层

`theme` 层

与其他预设的兼容性

presetRemToPx

presetWebFonts

presetLegacyCompat

transformDirectives