Preset Mini

Le preset de base pour UnoCSS, avec seulement les utilitaires les plus essentiels.

Code Source

Installation

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

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { presetMini } from 'unocss'

Règles

Ce preset est un sous-ensemble de @unocss/preset-wind3, contenant seulement les utilitaires les plus essentiels alignés avec les propriétés CSS, mais exclut les utilitaires opinés ou compliqués introduits dans Tailwind CSS (container, animation, gradient, etc.). Cela peut être un bon point de départ pour votre propre preset personnalisé basé sur les utilitaires familiers de Tailwind CSS ou Windi CSS.

Fonctionnalités

Mode sombre

Par défaut, ce preset génère un mode sombre basé sur les classes avec la variante dark:.

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

générera :

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

Mode sombre basé sur media query

Pour utiliser un mode sombre basé sur media query globalement, vous pouvez changer la config pour la variante dark: :

presetMini({
  dark: 'media'
})

Maintenant

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

générera :

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

CSS @layer

Le @layer natif de CSS est supporté avec la variante layer-xx: :

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

générera :

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

Thème

Vous pouvez entièrement personnaliser votre propriété de thème dans votre config, et UnoCSS finira par la fusionner profondément avec le thème par défaut.

WARNING

La propriété breakpoints n'est pas fusionnée profondément, mais remplacée, voir 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
• Défaut: class

Les options du mode sombre. Cela peut être soit class, media, ou un objet sélecteur personnalisé (DarkModeSelectors).

interface DarkModeSelectors {
  /**
   * Sélecteur pour la variante claire.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Sélecteur pour la variante sombre.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• Type: Boolean
• Défaut: false

Génère le sélecteur pseudo comme [group=""] au lieu de .group.

variablePrefix

• Type: string
• Défaut: un-

Préfixe pour les propriétés CSS personnalisées.

prefix

• Type: string | string[]
• Défaut: undefined

Préfixe des utilitaires.

preflight

• Type: boolean | on-demand
• Défaut: true

Génère le CSS preflight. Cela peut être :

• true: génère toujours le preflight.
• false: pas de preflight.
• on-demand: génère le preflight seulement pour les utilitaires utilisés.