إعادة تعيين أنماط المتصفح

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 compat

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

يعتمد هذا الإعادة على إعادة تعيين Tailwind، ناقص تجاوز لون الخلفية للأزرار لتجنب التعارضات مع أطر واجهة المستخدم. راجع المشكلة المرتبطة.

قبل

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