UnoCSS 中文网

主题

迷你预设 ​

🌐 Mini preset

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

🌐 The basic preset for UnoCSS, with only the most essential utilities.

源代码

安装 ​

🌐 Installation

bash
pnpm add -D @unocss/preset-mini
bash
yarn add -D @unocss/preset-mini
bash
npm install -D @unocss/preset-mini
bash
bun add -D @unocss/preset-mini
uno.config.ts
ts
import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

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

TIP

此预设包含在 unocss 包中，你也可以从那里导入它：

ts
import { presetMini } from 'unocss'

规则 ​

🌐 Rules

这个预设是 @unocss/preset-wind3 的一个子集，仅包含与 CSS 属性对齐的最基本实用工具，但排除了 Tailwind CSS（container、animation、gradient 等）中引入的有主观性或复杂的实用工具。这可以成为在熟悉的 Tailwind CSS 或 Windi CSS 实用工具基础上创建自定义预设的一个良好起点。

🌐 This preset is a subset of @unocss/preset-wind3, containing only the most essential utilities aligned with CSS's properties, but excludes opinioned or complicated utilities introduced in Tailwind CSS (container, animation, gradient etc.). This can be a good starting point for your own custom preset on top of familiar utilities from Tailwind CSS or Windi CSS.

特性 ​

🌐 Features

夜间模式 ​

🌐 Dark mode

默认情况下，此预设会生成基于类的夜间模式，并使用 dark: 变体。

🌐 By default, this preset generates class-based dark mode with dark: variant.

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

将生成：

🌐 will generate:

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

基于媒体查询的夜间模式 ​

🌐 Media query based dark mode

要改为在全局使用基于媒体查询的夜间模式，你可以更改 dark: 变体的配置：

🌐 To instead use media query based dark mode globally you can change the config for the dark: variant:

ts
presetMini({
  dark: 'media'
})

现在

🌐 Now

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

将生成：

🌐 will generate:

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

CSS @层 ​

🌐 CSS @layer

CSS 的原生 @layer 支持变体 layer-xx:

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

将生成：

🌐 will generate:

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

主题 ​

🌐 Theme

你可以在配置中完全自定义主题属性，UnoCSS 最终会将其深度合并到默认主题。

🌐 You can fully customize your theme property in your config, and UnoCSS will eventually deeply merge it to the default theme.

WARNING

breakpoints 属性不会进行深度合并，而是会被覆盖，详见 断点。

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

选项 ​

🌐 Options

dark ​

  • 类型: class | media | DarkModeSelectors
  • 默认: class

夜间模式选项。它可以是 class、media，或者自定义选择器对象(DarkModeSelectors)。

🌐 The dark mode options. It can be either class, media, or a custom selector object(DarkModeSelectors).

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

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

attributifyPseudo ​

  • 类型: Boolean
  • 默认: false

生成伪选择器为 [group=""] 而不是 .group。

🌐 Generate pseudo selector as [group=""] instead of .group.

variablePrefix ​

  • 类型: string
  • 默认: un-

CSS 自定义属性的前缀。

🌐 Prefix for CSS custom properties.

prefix ​

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

工具前缀。

🌐 Utils prefix.

preflight ​

  • 类型: boolean | on-demand
  • 默认: true

生成预处理 CSS。它可以是：

🌐 Generate preflight css. It can be:

  • true：始终生成预检。
  • false：无预检。
  • on-demand：仅为使用的工具生成预检。