Resetare Stil Browser

UnoCSS nu oferă resetare de stil sau preflight în mod implicit pentru a nu popula CSS-ul global și pentru flexibilitate maximă. Dacă utilizați UnoCSS împreună cu alte framework-uri CSS, acestea probabil fac deja resetarea pentru dvs. Dacă utilizați UnoCSS singur, puteți utiliza librării de resetare precum Normalize.css.

De asemenea, vă oferăm o mică colecție pentru a le prelua rapid:

Instalare

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Utilizare

Puteți adăuga una dintre următoarele foi de stil de resetare în main.js.

Normalize.css

Sursă: https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

Sursă: https://github.com/csstools/sanitize.css

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

Eric Meyer

Sursă: 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'

Această resetare se bazează pe resetarea Tailwind, minus suprascrierea culorii de fundal pentru butoane pentru a evita conflictele cu framework-urile UI. Consultați problema legată.

Înainte

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

După

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