ブラウザスタイルリセット

UnoCSSは、グローバルCSSを汚染せず、最大限の柔軟性を確保するために、デフォルトでスタイルリセットやプリフライトを提供していません。UnoCSSを他のCSSフレームワークと一緒に使用する場合、それらはすでにリセットを行っている可能性があります。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互換

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

このリセットはTailwindリセットに基づいており、UIフレームワークとの競合を避けるためにボタンの背景色のオーバーライドを除いています。詳細は関連する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 */
}