瀏覽器樣式重置

默認情況下，UnoCSS不提供樣式重置或預覽，因此不會填充全局CSS，也可以獲得最大的靈活性。如果您將UnoCSS與其他CSS框架一起使用，它們可能已經為您進行了重置。如果僅使用UnoCSS，則可以使用重置庫，如Normalize.css.

我們還為您提供了一個小集合，以便快速獲取：

安裝

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

使用

您可以將以下重置樣式表之一添加到main.js中。

Normalize.css

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

import '@unocss/reset/normalize.css'

sanitize.css

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

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

Eric Meyer

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

此重置基於Tailwind reset，減去按鈕的背景色覆蓋，以避免與UI框架發生衝突。請參閱鏈接的問題.

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 */
}