Мини пресет

Базовый пресет для 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

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

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

TIP

Этот пресет включен в пакет 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 глубоко объединит их с темой по умолчанию.

WARNING

Свойство 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

Генерировать префайл CSS. Может быть:

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