瀏覽器樣式重置

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

來源：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 框架衝突。請參閱 相關議題。

之前

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