브라우저 스타일 리셋

UnoCSS는 전역 CSS를 채우지 않고 최대 유연성을 위해 기본적으로 스타일 리셋이나 preflight를 제공하지 않습니다. 다른 CSS 프레임워크와 함께 UnoCSS를 사용한다면, 아마도 이미 리셋을 수행하고 있을 것입니다. UnoCSS만 사용한다면 Normalize.css와 같은 리셋 라이브러리를 사용할 수 있습니다.

빠르게 가져올 수 있도록 작은 컬렉션도 제공합니다:

설치

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

사용법

다음 리셋 스타일시트 중 하나를 main.js에 추가할 수 있습니다.

Normalize.css

출처: https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

출처: https://github.com/csstools/sanitize.css

import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.css'

Eric Meyer

출처: https://meyerweb.com/eric/tools/css/reset/index.html

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

Tailwind

import '@unocss/reset/tailwind.css'

Tailwind compat

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

이 리셋은 Tailwind reset을 기반으로 하며, UI 프레임워크와의 충돌을 피하기 위해 버튼의 배경색 재정의를 제거했습니다. 관련 이슈를 참조하세요.

Before

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

After

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /*background-color: transparent; !* 2 *!*/
  background-image: none; /* 2 */
}