Browser Style Reset

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

::: code-group

pnpm add @unocss/reset

yarn add @unocss/reset

npm install @unocss/reset

bun add @unocss/reset

:::

Usage

You can add one of the following reset stylesheets to your 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

Based on older Preflight, with select recent changes

import '@unocss/reset/tailwind.css'

Tailwind v4

Based on Preflight

import '@unocss/reset/tailwind-v4.css'

Tailwind compat

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

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

::: code-group

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

:::