Wind4 preset

Preset Tailwind4 CSS gọn nhẹ cho UnoCSS. Nó tương thích với tất cả các tính năng của PresetWind3 và cải thiện thêm.

TIP

Bạn có thể dành một chút thời gian đọc tài liệu này để hiểu những thay đổi

Cài đặt

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-wind4

bash

yarn add -D @unocss/preset-wind4

bash

npm install -D @unocss/preset-wind4

bash

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

Tương thích

Tham khảo Tương thích Tailwind để tìm hiểu về hỗ trợ trình duyệt và tương thích.

Chủ đề

Chủ đề của PresetWind4 gần như giống hệt chủ đề của PresetWind3, nhưng một số khóa chủ đề đã được điều chỉnh.

WARNING

Vui lòng lưu ý khi chuyển sang PresetWind4, tham khảo bảng dưới đây để kiểm tra cấu hình khóa chủ đề của bạn và điều chỉnh phù hợp.

PresetWind3	PresetWind4
`fontFamily`	`font`
`fontSize`	Di chuyển đến thuộc tính `fontSize` trong `text`
`lineHeight`	Di chuyển đến thuộc tính `lineHeight` trong `text` hoặc dùng `leading`
`letterSpacing`	Di chuyển đến thuộc tính `letterSpacing` trong `text` hoặc dùng `tracking`
`borderRadius`	`radius`
`easing`	`ease`
`breakpoints`	`breakpoint`
`verticalBreakpoints`	`verticalBreakpoint`
`boxShadow`	`shadow`
-	`insetShadow`
Các thuộc tính kích thước như `width`, `height`, `maxWidth`, `maxHeight`, `minWidth`, `minHeight`	Thống nhất dùng `spacing`
`transitionProperty`	`property`
`gridAutoColumn`, `gridAutoRow`, `gridColumn`, `gridRow`, `gridTemplateColumn`, `gridTemplateRow`	-
`container.maxWidth`	`containers.maxWidth`
-	`defaults`

`Theme.defaults`

Theme.defaults là cấu hình chủ đề mặc định toàn cục sẽ được áp dụng cho kiểu reset hoặc dùng làm giá trị mặc định cho một số quy tắc.

Dưới đây là các giá trị mặc định cho Theme.defaults, bạn có thể ghi đè trong cấu hình chủ đề của mình.

Nhấp để xem giá trị mặc định

import type { Theme } from '@unocss/preset-wind4/theme'

export const defaults: Theme['defaults'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

Tùy chọn

Cấu hình cơ bản của PresetWind4 tương tự PresetWind3, với những thay đổi quan trọng sau.

Đặt lại Kiểu

Trong PresetWind4, chúng ta căn chỉnh kiểu đặt lại với tailwind4 và tích hợp chúng nội bộ. Bạn không cần cài đặt bất kỳ gói đặt lại CSS nào khác như @unocss/reset hay normalize.css.

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

Bạn chỉ cần kiểm soát xem có bật kiểu đặt lại hay không thông qua một công tắc:

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      reset: true, 
      // ^?
    }),
  ],
})

Trình Giải Tiện ích

Trong PresetWind4, chúng ta đã nâng cấp hook postProcess để cung cấp API ngắn gọn hơn. Bây giờ bạn có thể tùy chỉnh trực tiếp utilities trong preset.

Ví dụ, nếu bạn muốn dùng preset presetRemToPx để chuyển rem thành px, bạn không cần import preset này riêng biệt nữa vì presetWind4 cung cấp chức năng này nội bộ.

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      utilityResolver: createRemToPxResolver() 
    }),
  ],
})

Bạn có thể tùy chỉnh nhiều bộ giải xử lý để xử lý utilities và xuất ra CSS bạn muốn.

Đối với các phương thức triển khai cụ thể, vui lòng tham khảo postProcess hoặc test case presetWind4

Preflight Chủ đề

Chọn cách tạo biến CSS chủ đề.

Động cơ UnoCSS với presetWind4 đã cài đặt sẽ tự động thu thập phụ thuộc vào chủ đề khi phân tích tiện ích và tạo biến CSS ở cuối.

true: Tạo đầy đủ các khóa chủ đề.
false: Tắt các khóa chủ đề. (Không khuyến nghị ⚠️)
'on-demand': Chỉ tạo khóa chủ đề khi được sử dụng. → ✅ (Mặc định)

CSS Được Tạo

Trong đầu ra của PresetWind4, hai layer mới đã được thêm: theme và cssvar-property.

Tên Layer	Mô tả	thứ tự
`cssvar-property`	Thuộc tính CSS được định nghĩa bởi `@property`	-200
`theme`	Biến CSS liên quan đến chủ đề	-150

Layer `cssvar-property`

Chúng ta đã dùng @property để định nghĩa thuộc tính CSS trong nhiều quy tắc để đạt được hiệu suất tốt hơn và kích thước nhỏ hơn.

Ví dụ, các tiện ích thường dùng như text-op-xx, bg-op-xx, v.v.

css

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

Layer `theme`

Chúng ta đã đặt các biến CSS liên quan đến chủ đề trong layer theme để bạn dễ ghi đè và sử dụng trực tiếp hơn. Nó có thể đầy đủ hoặc theo nhu cầu. Nó luôn đến từ cấu hình chủ đề của bạn.

css

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

Tương thích với Các Preset Khác

PresetWind4 nâng cao và tương thích với PresetWind3. Vì các gói khác ban đầu được phát triển cho PresetWind3, một số vấn đề có thể phát sinh khi sử dụng chúng cùng nhau. Các vấn đề đã biết bao gồm:

presetWebFonts

Khi dùng presetWebFonts với PresetWind4, khóa chủ đề fontFamily không còn được hỗ trợ. Vui lòng thực hiện điều chỉnh sau:

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetWebFonts({
      themeKey: 'font', 
      // ^?
    }),
  ],
})

presetLegacyCompat

Trong presetWind4, chúng ta dùng mô hình màu oklch để hỗ trợ độ tương phản màu và cảm nhận màu tốt hơn. Do đó, nó không tương thích với presetLegacyCompat và không khuyến nghị sử dụng cùng nhau.

Vui lòng tham khảo phần Tương thích để biết thêm thông tin.

transformDirectives

transformDirectives không hoạt động tốt với PresetWind4. Có một số vấn đề đã biết, vui lòng sử dụng thận trọng.

WARNING

Khi dùng @apply để xử lý các quy tắc có @property, xung đột có thể xảy ra giữa các mức layer khác nhau.

Wind4 preset ​

Cài đặt ​

Tương thích ​

Chủ đề ​

Theme.defaults ​

Tùy chọn ​

Đặt lại Kiểu ​

Trình Giải Tiện ích ​

Preflight Chủ đề ​

CSS Được Tạo ​

Layer cssvar-property ​

Layer theme ​

Tương thích với Các Preset Khác ​

presetWebFonts ​

presetLegacyCompat ​

transformDirectives ​

Wind4 preset

Cài đặt

Tương thích

Chủ đề

`Theme.defaults`

Tùy chọn

Đặt lại Kiểu

Trình Giải Tiện ích

Preflight Chủ đề

CSS Được Tạo

Layer `cssvar-property`

Layer `theme`

Tương thích với Các Preset Khác

presetWebFonts

presetLegacyCompat

transformDirectives