UnoCSS 中文网

Appearance

浏览器样式重置 ​

¥Browser Style Reset

UnoCSS 默认情况下不提供样式重置或预检，因此不会填充全局 CSS，同时也实现了最大的灵活性。如果你将 UnoCSS 与其他 CSS 框架一起使用，它们可能已经为你完成了重置。如果单独使用 UnoCSS，可以使用像 Normalize.css 这样的重置库。

¥UnoCSS does not provide style resetting or preflight by default so not to populate your global CSS and also for maximum flexibility. If you use UnoCSS along with other CSS frameworks, they probably already do the resetting for you. If you use UnoCSS alone, you can use resetting libraries like Normalize.css.

我们还提供了一个小集合供你快速获取：

¥We also provide a small collection for you to grab them quickly:

安装 ​

¥Installation

bash
pnpm add @unocss/reset
bash
yarn add @unocss/reset
bash
npm install @unocss/reset

用法 ​

¥Usage

你可以将以下重置样式表之一添加到 main.js。

¥You can add one of the following reset stylesheets to your main.js.

Normalize.css ​

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

¥Source: https://github.com/csstools/normalize.css

ts
import '@unocss/reset/normalize.css'

sanitize.css ​

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

¥Source: https://github.com/csstools/sanitize.css

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

Eric Meyer ​

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

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

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

Tailwind ​

ts
import '@unocss/reset/tailwind.css'

Tailwind 兼容 ​

¥Tailwind compat

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

此重置基于 Tailwind 重置，减去按钮的背景颜色覆盖，以避免与 UI 框架发生冲突。参见 链接问题。

¥This reset is based on Tailwind reset, minus the background color override for buttons to avoid conflicts with UI frameworks. See linked issue.

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