Redefinição de Estilo do Navegador

O UnoCSS não fornece redefinição de estilo ou preflight por padrão para não popular seu CSS global e também para máxima flexibilidade. Se você usar o UnoCSS junto com outros frameworks CSS, eles provavelmente já fazem a redefinição para você. Se você usar o UnoCSS sozinho, pode usar bibliotecas de redefinição como Normalize.css.

Também fornecemos uma pequena coleção para você usar rapidamente:

Instalação

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Uso

Você pode adicionar uma das seguintes folhas de estilo de redefinição ao seu main.js.

Normalize.css

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

import '@unocss/reset/normalize.css'

sanitize.css

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

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

Eric Meyer

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

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

Tailwind

import '@unocss/reset/tailwind.css'

Compatibilidade Tailwind

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

Esta redefinição é baseada na redefinição do Tailwind, menos a substituição da cor de fundo para botões para evitar conflitos com frameworks de UI. Veja o problema vinculado.

Before

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

After

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