Сброс стилей браузера

UnoCSS не предоставляет сброс стилей или preflight по умолчанию, чтобы не заполнять глобальный 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-фреймворками. Смотрите связанный выпуск.

До

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