Mini preset

Preset พื้นฐานสำหรับ UnoCSS มีเฉพาะ utilities ที่จำเป็นที่สุด

Source Code

การติดตั้ง

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(),
    // ...presets อื่นๆ
  ],
})

TIP

preset นี้รวมอยู่ในแพ็กเกจ unocss คุณสามารถ import จากที่นั่นได้เช่นกัน:

import { presetMini } from 'unocss'

Rules

preset นี้เป็น subset ของ @unocss/preset-wind3 มีเฉพาะ utilities ที่จำเป็นที่สุดที่สอดคล้องกับ CSS properties แต่ไม่รวม utilities ที่มีความคิดเห็นหรือซับซ้อนที่แนะนำใน Tailwind CSS (container, animation, gradient ฯลฯ) นี่สามารถเป็นจุดเริ่มต้นที่ดีสำหรับ custom preset ของคุณเองบนพื้นฐานของ utilities ที่คุ้นเคยจาก Tailwind CSS หรือ Windi CSS

Features

Dark mode

โดยค่าเริ่มต้น preset นี้สร้าง class-based dark mode ด้วย dark: variant

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

จะสร้าง:

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

Media query based dark mode

เพื่อใช้ media query based dark mode ทั่วโลกแทน คุณสามารถเปลี่ยน config สำหรับ dark: variant:

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's native @layer ได้รับการสนับสนุนด้วย variant 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;
  }
}

Theme

คุณสามารถปรับแต่ง theme property ของคุณได้อย่างเต็มที่ใน config ของคุณ และ UnoCSS จะ merge แบบ deep ไปยัง default theme ในที่สุด

WARNING

breakpoints property ไม่ถูก merge แบบ deep แต่ถูก override ดู Breakpoints

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

Options

dark

• Type: class | media | DarkModeSelectors
• Default: class

ตัวเลือก dark mode สามารถเป็น class, media, หรือ custom selector object(DarkModeSelectors)

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

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

attributifyPseudo

• Type: Boolean
• Default: false

สร้าง pseudo selector เป็น [group=""] แทน .group

variablePrefix

• Type: string
• Default: un-

Prefix สำหรับ CSS custom properties

prefix

• Type: string | string[]
• Default: undefined

Utils prefix

preflight

• Type: boolean | on-demand
• Default: true

สร้าง preflight css สามารถเป็น:

• true: สร้าง preflight เสมอ
• false: ไม่มี preflight
• on-demand: สร้าง preflight เฉพาะสำหรับ utilities ที่ใช้