UnoCSS 中文网

主题

浏览器样式重置 ​

🌐 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
bash
bun add @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 ​

基于较早的 Preflight，并进行了部分近期更改

🌐 Based on older Preflight, with select recent changes

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

Tailwind v4 ​

基于 Preflight

🌐 Based on Preflight

ts
import '@unocss/reset/tailwind-v4.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 */
}