Mini preset

UnoCSS의 기본 preset으로, 가장 필수적인 유틸리티만 포함합니다.

소스 코드

설치

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(),
    // ...other presets
  ],
})

TIP

이 preset은 unocss 패키지에 포함되어 있으며, 거기서도 가져올 수 있습니다:

import { presetMini } from 'unocss'

규칙

이 preset은 @unocss/preset-wind3의 하위 집합으로, CSS 속성과 일치하는 가장 필수적인 유틸리티만 포함하지만 Tailwind CSS에서 도입된 의견이 있거나 복잡한 유틸리티(container, animation, gradient 등)는 제외합니다. 이는 Tailwind CSS 또는 Windi CSS의 친숙한 유틸리티 위에 자신만의 사용자 정의 preset을 위한 좋은 시작점이 될 수 있습니다.

기능

다크 모드

기본적으로 이 preset은 dark: variant로 클래스 기반 다크 모드를 생성합니다.

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

다음이 생성됩니다:

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

미디어 쿼리 기반 다크 모드

대신 전역적으로 미디어 쿼리 기반 다크 모드를 사용하려면 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의 네이티브 @layer가 layer-xx: variant로 지원됩니다:

<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는 결국 기본 테마와 깊이 병합합니다.

WARNING

breakpoints 속성은 깊이 병합되지 않고 덮어쓰여집니다. 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 {
  /**
   * 라이트 variant용 선택자.
   *
   * @default '.light'
   */
  light?: string

  /**
   * 다크 variant용 선택자.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• 타입: Boolean
• 기본값: false

.group 대신 [group=""]로 의사 선택자 생성.

variablePrefix

• 타입: string
• 기본값: un-

CSS 사용자 정의 속성의 접두사.

prefix

• 타입: string | string[]
• 기본값: undefined

유틸리티 접두사.

preflight

• 타입: boolean | on-demand
• 기본값: true

Preflight CSS 생성. 다음일 수 있습니다:

• true: 항상 preflight 생성.
• false: preflight 없음.
• on-demand: 사용된 유틸리티에 대해서만 preflight 생성.