浏览器样式重置

UnoCSS 默认不提供样式重置或预设样式，以避免污染你的全局 CSS 并实现最大的灵活性。如果你将 UnoCSS 与其他 CSS 框架一起使用，它们可能已经为你完成了样式重置。如果你单独使用 UnoCSS，可以使用类似 Normalize.css 的重置库。

我们也提供了一些小型的样式重置包供你快速使用：

安装

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

使用方法

你可以将以下任意一个重置样式表添加到你的 main.js 文件中。

Normalize.css

源码：https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

源码：https://github.com/csstools/sanitize.css

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

Eric Meyer

源码：https://meyerweb.com/eric/tools/css/reset/index.html

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

Tailwind

import '@unocss/reset/tailwind.css'

Tailwind 兼容版

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

该重置基于 Tailwind 的重置样式，但移除了按钮的背景颜色覆盖，以避免与 UI 框架产生冲突。请参见 相关 issue。

重置前

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

重置后

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