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

UnoCSS は最大限の柔軟性を持たせるためにデフォルトでスタイルリセットやプリフライトを提供せず、グローバル CSS を汚染しません。他の CSS フレームワークと一緒に UnoCSS を使用する場合、それらはおそらく既にリセットを行っています。UnoCSS を単独で使用する場合は、Normalize.css のようなリセットライブラリを使用できます。

また、すぐに利用できる小さなコレクションも提供しています。

インストール

::: code-group

pnpm add @unocss/reset

yarn add @unocss/reset

npm install @unocss/reset

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

古い Preflight に基づき、最近の選択された変更を含む

import '@unocss/reset/tailwind.css'

Tailwind v4

Preflight に基づく

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

Tailwind compat

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

このリセットは Tailwind reset に基づいており、UI フレームワークとの競合を避けるためにボタンの背景色の上書きを除外しています。関連する問題を参照してください。

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

:::