迷你預設集

UnoCSS 的基本預設集，僅包含最必要的工具程式。

原始碼

安裝

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

uno.config.ts

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...other presets
  ],
})

提示

此預設集已包含在 unocss 套件中，您也可以從那裡導入它

import { presetMini } from 'unocss'

規則

此預設集是 @unocss/preset-wind 的子集，僅包含與 CSS 屬性一致的最必要的工具程式，但不包含 Tailwind CSS 中引入的主觀或複雜的工具程式（container、animation、gradient 等）。這可以作為您在熟悉 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: 變體

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

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

或者使用 dark: 變體的設定進行全域設定

presetMini({
  dark: 'media'
})

CSS @layer

使用變體 layer-xx: 支援 CSS 原生的 @layer

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

將會產生

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

主題

您可以在設定中完全自定義主題屬性，UnoCSS 最終會將其深度合併到預設主題中。

警告

breakpoints 屬性不是深度合併，而是覆蓋，請參閱 斷點。

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

選項

dark

• **類型：** class | media | DarkModeSelectors
• **預設值：** class

深色模式選項。它可以是 class、media 或自定義選擇器物件 (DarkModeSelectors)。

interface DarkModeSelectors {
  /**
   * Selector for light variant.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selector for dark variant.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• **類型：** 布林值
• **預設值：** false

將偽選擇器生成為 [group=""] 而不是 .group。

variablePrefix

• **類型：** 字串
• **預設值：** un-

CSS 自定義屬性的前綴。

prefix

• **類型：** 字串 | 字串[]
• **預設值：** undefined

工具程式前綴。

preflight

• **類型：** 布林值
• **預設值：** true

產生預設樣式。