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

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

Основан на старой версии Preflight, с некоторыми недавними изменениями

import '@unocss/reset/tailwind.css'

Tailwind v4

Основан на Preflight

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

Tailwind compat

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