Browser Style Reset

UnoCSS ไม่จัดหา style resetting หรือ preflight โดยค่าเริ่มต้นเพื่อไม่ให้เพิ่ม CSS ทั่วไปของคุณ และเพื่อความยืดหยุ่นสูงสุด หากคุณใช้ UnoCSS ร่วมกับ CSS frameworks อื่น พวกเขาอาจทำการรีเซ็ตให้คุณแล้ว หากคุณใช้ UnoCSS อย่างเดียว คุณสามารถใช้ไลบรารีรีเซ็ตเช่น Normalize.css

เรายังจัดหาชุดเล็กๆ สำหรับคุณเพื่อดึงมันได้อย่างรวดเร็ว:

การติดตั้ง

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

การใช้งาน

คุณสามารถเพิ่มหนึ่งใน stylesheets รีเซ็ตต่อไปนี้ให้กับ 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 reset ลบการแทนที่สีพื้นหลังสำหรับปุ่มเพื่อหลีกเลี่ยงความขัดแย้งกับ UI frameworks ดู ปัญหาที่เกี่ยวข้อง

ก่อน

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