Preset Mini

Preset cơ bản cho UnoCSS, chỉ với các tiện ích cần thiết nhất.

Mã nguồn

Cài đặt

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(),
    // ...các preset khác
  ],
})

TIP

Preset này được bao gồm trong gói unocss, bạn cũng có thể nhập nó từ đó:

import { presetMini } from 'unocss'

Quy tắc

Preset này là một tập hợp con của @unocss/preset-wind3, chỉ chứa các tiện ích cần thiết nhất phù hợp với các thuộc tính của CSS, nhưng loại trừ các tiện ích có ý kiến hoặc phức tạp được giới thiệu trong Tailwind CSS (container, animation, gradient v.v.). Đây có thể là một điểm khởi đầu tốt cho preset tùy chỉnh riêng của bạn trên các tiện ích quen thuộc từ Tailwind CSS hoặc Windi CSS.

Tính năng

Chế độ tối

Theo mặc định, preset này tạo chế độ tối dựa trên lớp với biến thể dark:.

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

sẽ tạo ra:

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

Chế độ tối dựa trên truy vấn media

Để thay thế sử dụng chế độ tối dựa trên truy vấn media toàn cục bạn có thể thay đổi cấu hình cho biến thể dark::

presetMini({
  dark: 'media'
})

Bây giờ

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

sẽ tạo ra:

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

CSS @layer

@layer gốc của CSS được hỗ trợ với biến thể layer-xx:

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

sẽ tạo ra:

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

Chủ đề

Bạn có thể hoàn toàn tùy chỉnh thuộc tính chủ đề của mình trong cấu hình, và UnoCSS cuối cùng sẽ hợp nhất sâu nó vào chủ đề mặc định.

WARNING

Thuộc tính breakpoints không được hợp nhất sâu, mà bị ghi đè, xem Điểm ngắt.

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

Tùy chọn

dark

• Kiểu: class | media | DarkModeSelectors
• Mặc định: class

Các tùy chọn chế độ tối. Nó có thể là class, media, hoặc một đối tượng bộ chọn tùy chỉnh(DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Bộ chọn cho biến thể sáng.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Bộ chọn cho biến thể tối.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Kiểu: Boolean
• Mặc định: false

Tạo bộ chọn pseudo như [group=""] thay vì .group.

variablePrefix

• Kiểu: string
• Mặc định: un-

Tiền tố cho các thuộc tính tùy chỉnh CSS.

prefix

• Kiểu: string | string[]
• Mặc định: undefined

Tiền tố tiện ích.

preflight

• Kiểu: boolean | on-demand
• Mặc định: true

Tạo css preflight. Nó có thể là:

• true: luôn tạo preflight.
• false: không có preflight.
• on-demand: chỉ tạo preflight cho các tiện ích đã sử dụng.