Preset Mini

O preset básico para UnoCSS, com apenas os utilitários mais essenciais.

Código Fonte

Instalação

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

TIP

Este preset está incluído no pacote unocss, você também pode importá-lo de lá:

import { presetMini } from 'unocss'

Regras

Este preset é um subconjunto do @unocss/preset-wind3, contendo apenas os utilitários mais essenciais alinhados com as propriedades do CSS, mas exclui utilitários opinativos ou complicados introduzidos no Tailwind CSS (container, animation, gradient etc.). Isso pode ser um bom ponto de partida para seu próprio preset personalizado sobre utilitários familiares do Tailwind CSS ou Windi CSS.

Recursos

Modo escuro

Por padrão, este preset gera o modo escuro baseado em classes com a variante dark:.

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

irá gerar:

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

Modo escuro baseado em media query

Para usar o modo escuro baseado em media query globalmente, você pode alterar a configuração para a variante dark::

presetMini({
  dark: 'media'
})

Agora

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

irá gerar:

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

CSS @layer

O @layer nativo do CSS é suportado com a variante layer-xx::

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

irá gerar:

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

Tema

Você pode personalizar completamente sua propriedade de tema em sua configuração, e o UnoCSS eventualmente mesclará profundamente com o tema padrão.

WARNING

A propriedade breakpoints não é mesclada profundamente, mas sobrescrita, veja Breakpoints.

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

Opções

dark

• Tipo: class | media | DarkModeSelectors
• Padrão: class

As opções do modo escuro. Pode ser class, media, ou um objeto de seletor personalizado (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Seletor para variante clara.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Seletor para variante escura.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Tipo: Boolean
• Padrão: false

Gera seletor pseudo como [group=""] em vez de .group.

variablePrefix

• Tipo: string
• Padrão: un-

Prefixo para propriedades CSS personalizadas.

prefix

• Tipo: string | string[]
• Padrão: undefined

Prefixo para utilitários.

preflight

• Tipo: boolean | on-demand
• Padrão: true

Gera CSS preflight. Pode ser:

• true: sempre gera preflight.
• false: sem preflight.
• on-demand: gera preflight apenas para utilitários usados.