Browser Style Reset ​

UnoCSS does not provide style resetting or preflight by default for maximum flexibility and does not populate your global CSS. 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

pnpm add @unocss/reset

yarn add @unocss/reset

yarn add @unocss/reset

npm install @unocss/reset

npm install @unocss/reset

Usage ​

You can add one of the following reset stylesheets to your main.js.

normalize.css ​

Source: https://necolas.github.io/normalize.css/

import '@unocss/reset/normalize.css'

import '@unocss/reset/normalize.css'

sanitize.css ​

Source: https://github.com/csstools/sanitize.css#usage

import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.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'

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

Tailwind ​

import '@unocss/reset/tailwind.css'

import '@unocss/reset/tailwind.css'

Tailwind compat ​

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

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 #2127.

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

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