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 ​

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.

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