Đặt lại Kiểu Trình duyệt

UnoCSS không cung cấp đặt lại kiểu hoặc preflight theo mặc định để không làm đầy CSS toàn cục của bạn và cũng để có tính linh hoạt tối đa. Nếu bạn sử dụng UnoCSS cùng với các framework CSS khác, chúng có lẽ đã làm việc đặt lại cho bạn. Nếu bạn sử dụng UnoCSS một mình, bạn có thể sử dụng các thư viện đặt lại như Normalize.css.

Chúng tôi cũng cung cấp một bộ sưu tập nhỏ để bạn có thể lấy chúng nhanh chóng:

Cài đặt

pnpm

pnpm add @unocss/reset

yarn

yarn add @unocss/reset

npm

npm install @unocss/reset

bun

bun add @unocss/reset

Sử dụng

Bạn có thể thêm một trong các stylesheet đặt lại sau vào main.js của mình.

Normalize.css

Nguồn: https://github.com/csstools/normalize.css

import '@unocss/reset/normalize.css'

sanitize.css

Nguồn: https://github.com/csstools/sanitize.css

import '@unocss/reset/sanitize/sanitize.css'
import '@unocss/reset/sanitize/assets.css'

Eric Meyer

Nguồn: https://meyerweb.com/eric/tools/css/reset/index.html

import '@unocss/reset/eric-meyer.css'

Tailwind

import '@unocss/reset/tailwind.css'

Tailwind tương thích

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

Đặt lại này dựa trên Đặt lại Tailwind, trừ việc ghi đè màu nền cho các nút để tránh xung đột với các framework UI. Xem vấn đề liên quan.

Trước

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

Sau

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  /*background-color: transparent; !* 2 *!*/
  background-image: none; /* 2 */
}