Wind3 預設

UnoCSS 的 Tailwind CSS / Windi CSS 緊湊預設。

源代碼

INFO

@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

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

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

TIP

此預設已包含在 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"。

帶有任意值的背景位置

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- 前綴快速找到所需的動畫。

TIP

我們不會合並 Tailwind 和 Animate.css 中衝突的動畫名稱。如果您需要使用 Animate.css 的動畫名稱，請使用 animate-<name>-alt。

例如

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

如果您想自定義或修改動畫效果，我們提供了高度可自定義的配置項。您可以通過配置項修改動畫的持續時間、延遲、速度曲線等。

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

TIP

您還可以添加 category 來對動畫進行分組，以便更好地管理。這將使下游工具更容易使用動畫效果。

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

實驗性特性

WARNING

此預設包含可能隨時以破壞性方式更改的實驗性特性。

媒體懸停

媒體懸停解決了粘性懸停問題，即在移動設備上點擊包含懸停樣式的目標會使懸停樣式持續到點擊其他地方。

由於常規的 :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));
  }
}

選項

INFO

這些預設選項繼承自 @unocss/preset-mini。

important

• 類型： boolean | string
• 默認值： false

important 選項允許您控制 UnoCSS 的實用工具是否應標記為 !important。當與具有高特異性選擇器的現有 CSS 一起使用時，這可能非常有用。

WARNING

使用此選項將對 UnoCSS 生成的所有實用工具應用 important。如果您只想對特定實用工具應用，可以使用 important: 變體。

然而，將 important 設置為 true 可能會在合併第三方 JS 庫（這些庫會為元素添加內聯樣式）時引入一些問題。在這些情況下，UnoCSS 的 !important 實用工具會覆蓋內聯樣式，這可能會破壞您的預期設計。

為了解決這個問題，您可以將 important 設置為 ID 選擇器，如 #app：

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