Réinitialisation du style du navigateur

UnoCSS ne fournit pas de réinitialisation de style ou de preflight par défaut afin de ne pas polluer votre CSS global et aussi pour une flexibilité maximale. Si vous utilisez UnoCSS avec d'autres frameworks CSS, ils effectuent probablement déjà la réinitialisation pour vous. Si vous utilisez UnoCSS seul, vous pouvez utiliser des bibliothèques de réinitialisation comme Normalize.css.

Nous proposons également une petite collection pour que vous puissiez les récupérer rapidement :

Installation

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Utilisation

Vous pouvez ajouter l'une des feuilles de style de réinitialisation suivantes à votre main.js.

Normalize.css

Source : https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

Source : https://github.com/csstools/sanitize.css

import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.css'

Eric Meyer

Source : https://meyerweb.com/eric/tools/css/reset/index.html

import '@unocss/reset/eric-meyer.css'

Tailwind

import '@unocss/reset/tailwind.css'

Compatibilité Tailwind

import '@unocss/reset/tailwind-compat.css'

Cette réinitialisation est basée sur la réinitialisation Tailwind, sans la surcharge de couleur de fond pour les boutons afin d'éviter les conflits avec les frameworks UI. Voir issue liée.

Avant

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

Après

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /*background-color: transparent; !* 2 *!*/
  background-image: none; /* 2 */
}