UnoCSS 中文网

Appearance

浏览器样式重置 ​

UnoCSS 默认不提供样式重置或预设样式，这样既不会污染全局 CSS，也能保持最大的灵活性。如果你将 UnoCSS 与其他 CSS 框架一起使用，它们可能已经为你做了样式重置。如果你只使用 UnoCSS，你可以使用像 Normalize.css 这样的重置库。

我们也提供了一个小型集合供你快速使用：

安装 ​

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

使用方法 ​

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

Normalize.css 它提供一致的、跨浏览器的 HTML 元素默认样式。 ​

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

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

sanitize.css 提供一致的、跨浏览器的 HTML 元素默认样式以及有用的默认值。 ​

来源: 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

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

Tailwind ​

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

Tailwind 兼容 ​

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

此重置基于 Tailwind 重置，但移除了按钮的背景色覆盖以避免与 UI 框架产生冲突。参见相关 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 */
}