迷你預設

UnoCSS 的基礎預設，僅包含最基本的實用工具。

源代碼

安裝

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

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

export default defineConfig({
  presets: [
    presetMini(),
    // ...其他預設
  ],
})

TIP

此預設已包含在 unocss 包中，你也可以從那裡導入：

import { presetMini } from 'unocss'

規則

此預設是 @unocss/preset-wind3 的子集，僅包含與 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: 變體的配置：

presetMini({
  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);
  }
}

CSS @layer

支持 CSS 原生 @layer，使用 layer-xx: 變體

<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 將最終深度合併到默認主題。

WARNING

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 {
  /**
   * 亮色變體的選擇器。
   *
   * @default '.light'
   */
  light?: string

  /**
   * 暗色變體的選擇器。
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• 類型： Boolean
• 默認值： false

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

variablePrefix

• 類型： string
• 默認值： un-

CSS 自定義屬性的前綴。

prefix

• 類型： string | string[]
• 默認值： undefined

實用工具前綴。

preflight

• 類型： boolean | on-demand
• 默認值： true

生成預處理 CSS。可以是：

• true：始終生成預處理。
• false：不生成預處理。
• on-demand：僅為使用的實用工具生成預處理。