迷你预设

¥Mini preset

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

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

源代码

¥Source Code

安装

¥Installation

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 包中，你也可以从那里导入它：

¥This preset is included in the unocss package, you can also import it from there:

import { presetMini } from 'unocss'

规则

¥Rules

此预设是 @unocss/preset-wind 的子集，仅包含与 CSS 属性一致的最基本工具，但不包括 Tailwind CSS 中引入的固定或复杂的工具（container、animation、gradient 等）。这可以作为你在 Tailwind CSS 或 Windi CSS 的熟悉工具之上进行自定义预设的良好起点。

¥This preset is a subset of @unocss/preset-wind, 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.

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

将生成：

¥will generate:

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

要选择基于媒体查询的夜间模式，你可以使用 @dark: 变体：

¥To opt-in media query based dark mode, you can use @dark: variant:

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

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

或者使用 dark: 变体的配置进行全局设置

¥Or set globally with the config for dark: variant

presetMini({
  dark: 'media'
})

CSS @层

¥CSS @layer

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

¥CSS's native @layer is supported with variant layer-xx:

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

将生成：

¥will generate:

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

警告

breakpoints 属性未深度合并，但被覆盖，请参阅 断点。

¥breakpoints property isn't deeply merged, but overridden, see Breakpoints.

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

  ¥Type: class | media | DarkModeSelectors

• 默认：class

  ¥Default: class

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

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

interface DarkModeSelectors {
  /**

   * Selector for light variant.

   *    * @default '.light'
   */
  light?: string

  /**

   * Selector for dark variant.

   *    * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• 类型：Boolean

  ¥Type: Boolean

• 默认：false

  ¥Default: false

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

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

variablePrefix

• 类型：string

  ¥Type: string

• 默认：un-

  ¥Default: un-

CSS 自定义属性的前缀。

¥Prefix for CSS custom properties.

prefix

• 类型：string | string[]

  ¥Type: string | string[]

• 默认：undefined

  ¥Default: undefined

工具前缀。

¥Utils prefix.

preflight

• 类型：boolean

  ¥Type: boolean

• 默认：true

  ¥Default: true

生成预检。

¥Generate preflight.