Пресет Mini

Базовый пресет для UnoCSS, содержащий только самые необходимые утилиты.

Исходный код

Установка

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

uno.config.ts

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...другие пресеты
  ],
})

СОВЕТ

Этот пресет включен в пакет unocss, вы также можете импортировать его оттуда:

import { presetMini } from 'unocss'

Правила

Этот пресет является подмножеством @unocss/preset-wind3 и содержит только самые необходимые утилиты, соответствующие свойствам CSS. Он исключает специфичные или сложные утилиты, введенные в Tailwind CSS (container, animation, gradient и др.). Это может стать отличной отправной точкой для вашего собственного пресета, основанного на знакомых утилитах из Tailwind CSS или Windi CSS.

Возможности

Тёмный режим

По умолчанию этот пресет генерирует тёмный режим на основе классов с помощью варианта dark:.

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

сгенерирует:

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

Тёмный режим на основе медиа-запросов

Чтобы использовать глобальный тёмный режим на основе медиа-запросов, вы можете изменить конфигурацию варианта dark::

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:

<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 в итоге выполнит их глубокое слияние (deep merge) с темой по умолчанию.

ПРЕДУПРЕЖДЕНИЕ

Свойство 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 {
  /**
   * Селектор для светлого варианта.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Селектор для тёмного варианта.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Тип: Boolean
• По умолчанию: false

Генерировать псевдоселектор как [group=""] вместо .group.

variablePrefix

• Тип: string
• По умолчанию: un-

Префикс для пользовательских свойств CSS.

prefix

• Тип: string | string[]
• По умолчанию: undefined

Префикс утилит.

preflight

• Тип: boolean | on-demand
• По умолчанию: true

Генерация префлайта. Возможные значения:

• true: всегда генерировать префлайт.
• false: не генерировать префлайт.
• on-demand: генерировать префлайт только для использованных утилит.