Wind 預設集

適用於 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 允許 使用 bare 語法為 background-position 使用自定義值

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

Wind 預設集會將 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。 當將 UnoCSS 與具有高特異性選擇器的現有 CSS 一起使用時，這會非常有用。

警告

使用此選項將對 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));
}