Browser Style Reset

UnoCSS bietet standardmäßig kein Style-Reset oder Preflight, um Ihr globales CSS nicht aufzufüllen und auch für maximale Flexibilität. Wenn Sie UnoCSS zusammen mit anderen CSS-Frameworks verwenden, führen diese wahrscheinlich bereits das Reset für Sie durch. Wenn Sie UnoCSS allein verwenden, können Sie Reset-Bibliotheken wie Normalize.css verwenden.

Wir bieten auch eine kleine Sammlung für Sie, um sie schnell zu erhalten:

Installation

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Verwendung

Sie können eines der folgenden Reset-Stylesheets zu Ihrer main.js hinzufügen.

Normalize.css

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

import '@unocss/reset/normalize.css'

sanitize.css

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

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

Eric Meyer

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

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

Tailwind

import '@unocss/reset/tailwind.css'

Tailwind compat

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

Dieses Reset basiert auf dem Tailwind Reset, abzüglich der Hintergrundfarbe-Überschreibung für Buttons, um Konflikte mit UI-Frameworks zu vermeiden. Siehe verlinktes Issue.

Vorher

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

Nachher

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