Webbläsarens Stil-återställning

UnoCSS tillhandahåller inte stil-återställning eller preflight som standard för att inte fylla din globala CSS och också för maximal flexibilitet. Om du använder UnoCSS tillsammans med andra CSS-ramverk gör de troligtvis redan återställningen åt dig. Om du använder UnoCSS ensamt kan du använda återställningsbibliotek som Normalize.css.

Vi tillhandahåller också en liten samling för dig att snabbt få tag i dem:

Installation

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Användning

Du kan lägga till ett av följande återställnings-stylesheets i din main.js.

Normalize.css

Källa: https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

Källa: https://github.com/csstools/sanitize.css

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

Eric Meyer

Källa: 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'

Denna återställning är baserad på Tailwind-återställning, minus bakgrundsfärgsöverskrivningen för knappar för att undvika konflikter med UI-ramverk. Se länkad issue.

Före

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

Efter

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