最小预设

UnoCSS 的基础预设，仅包含最基本的工具类。

Source Code

Installation

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

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

支持使用 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

• 类型: Boolean
• 默认值: false

将伪选择器生成为 [group=""] 而非 .group。

variablePrefix

• 类型: string
• 默认值: un-

CSS 自定义属性的前缀。

prefix

• 类型: string | string[]
• 默认值: undefined

工具类的前缀。

preflight

• 类型: boolean | 按需生成
• 默认值: true

生成预样式 CSS。它可以是：

• true：始终生成预样式。
• false：不生成预样式。
• 按需生成：仅为使用的工具类生成预样式。