Reset de Estilos del Navegador

UnoCSS no proporciona reset de estilos o preflight por defecto para no poblar tu CSS global y también para máxima flexibilidad. Si usas UnoCSS junto con otros frameworks CSS, probablemente ya hagan el reset por ti. Si usas UnoCSS solo, puedes usar bibliotecas de reset como Normalize.css.

También proporcionamos una pequeña colección para que puedas tomarlas rápidamente:

Instalación

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Uso

Puedes agregar una de las siguientes hojas de estilo de reset a tu main.js.

Normalize.css

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

import '@unocss/reset/normalize.css'

sanitize.css

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

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

Eric Meyer

Fuente: 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'

Este reset está basado en Tailwind reset, menos la sobrescritura del color de fondo para botones para evitar conflictos con frameworks de UI. Ver issue vinculado.

Antes

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

Después

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