Wind4 preset

Preset แบบครบครันสำหรับ Tailwind4 CSS ใน UnoCSS เข้ากันได้กับคุณสมบัติทั้งหมดของ PresetWind3 และปรับปรุงเพิ่มเติม

ซอร์สโค้ด

TIP

คุณสามารถใช้เวลาสักครู่อ่านเอกสารนี้เพื่อทำความเข้าใจการเปลี่ยนแปลง

การติดตั้ง

pnpm

pnpm add -D @unocss/preset-wind4

yarn

yarn add -D @unocss/preset-wind4

npm

npm install -D @unocss/preset-wind4

bun

bun add -D @unocss/preset-wind4

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

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

ความเข้ากันได้

ดู Tailwind Compatibility เพื่อเรียนรู้เกี่ยวกับการรองรับเบราว์เซอร์และความเข้ากันได้

Theme

Theme ของ PresetWind4 เกือบจะเหมือนกับ theme ของ PresetWind3 แต่มีการปรับเปลี่ยน key ของ theme บางอย่าง

WARNING

โปรดทราบเมื่อเปลี่ยนไปใช้ PresetWind4 ให้ดูตารางด้านล่างเพื่อตรวจสอบการกำหนดค่า theme key ของคุณและปรับให้เหมาะสม

PresetWind3	PresetWind4
fontFamily	font
fontSize	ย้ายไปเป็นคุณสมบัติ fontSize ใน text
lineHeight	ย้ายไปเป็นคุณสมบัติ lineHeight ใน text หรือใช้ leading
letterSpacing	ย้ายไปเป็นคุณสมบัติ letterSpacing ใน text หรือใช้ tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
คุณสมบัติขนาดเช่น width, height, maxWidth, maxHeight, minWidth, minHeight	รวมเป็นการใช้ spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults เป็นการกำหนดค่า theme เริ่มต้นระดับโลกที่จะถูกนำไปใช้กับสไตล์ reset หรือใช้เป็นค่าเริ่มต้นสำหรับกฎบางอย่าง

ด้านล่างนี้คือค่าเริ่มต้นสำหรับ Theme.defaults ซึ่งคุณสามารถแทนที่ได้ในการกำหนดค่า theme ของคุณ

คลิกเพื่อดูค่าเริ่มต้น

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)',
  },
}

ตัวเลือก

การกำหนดค่าพื้นฐานของ PresetWind4 คล้ายกับ PresetWind3 โดยมีการเปลี่ยนแปลงสำคัญดังต่อไปนี้

Reset Styles

ใน PresetWind4 เราจัดสไตล์ reset ให้สอดคล้องกับ tailwind4 และรวมไว้ภายใน คุณไม่จำเป็นต้องติดตั้งแพ็กเกจ CSS reset เพิ่มเติมใดๆ เช่น @unocss/reset หรือ normalize.css

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

คุณเพียงแค่ต้องควบคุมว่าจะเปิดใช้งานสไตล์ reset หรือไม่ผ่านสวิตช์:

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

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

Utility Resolver

ใน PresetWind4 เราได้อัปเกรด hook postProcess เพื่อให้ API ที่กระชับขึ้น ตอนนี้คุณสามารถปรับแต่ง utilities ใน preset ได้โดยตรง

ตัวอย่างเช่น หากคุณต้องการใช้ preset presetRemToPx เพื่อแปลง rem เป็น px คุณไม่จำเป็นต้องนำเข้า preset นี้แยกต่างหากอีกต่อไป เนื่องจาก presetWind4 มีฟังก์ชันนี้ภายใน

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

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

คุณสามารถปรับแต่ง resolver set เพิ่มเติมเพื่อประมวลผล utilities และแสดงผล CSS ที่คุณต้องการ

สำหรับวิธีการใช้งานโดยเฉพาะ โปรดดู postProcess หรือ presetWind4 test case

Theme Preflight

เลือกวิธีการสร้างตัวแปร CSS theme

เอนจิน UnoCSS ที่ติดตั้ง presetWind4 จะเก็บรวบรวมการพึ่งพาบน theme โดยอัตโนมัติเมื่อแยกวิเคราะห์ utilities และสร้างตัวแปร CSS เมื่อสิ้นสุด

• true: สร้าง theme keys อย่างสมบูรณ์
• false: ปิดใช้งาน theme keys (ไม่แนะนำ ⚠️)
• 'on-demand': สร้าง theme keys เฉพาะเมื่อใช้ -> ✅ (ค่าเริ่มต้น)

CSS ที่สร้างขึ้น

ในผลลัพธ์ของ PresetWind4 มีการเพิ่มสอง layer ใหม่: theme และ cssvar-property

ชื่อ Layer	คำอธิบาย	ลำดับ
cssvar-property	คุณสมบัติ CSS ที่กำหนดโดย @property	-200
theme	ตัวแปร CSS ที่เกี่ยวข้องกับ theme	-150

Layer cssvar-property

เราได้ใช้ @property เพื่อกำหนดคุณสมบัติ CSS ในกฎหลายอย่างเพื่อให้ได้ประสิทธิภาพที่ดีขึ้นและขนาดที่เล็กลง

ตัวอย่างเช่น utilities ที่ใช้บ่อยเช่น text-op-xx, bg-op-xx และอื่นๆ

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

Layer theme

เราได้วางตัวแปร CSS ที่เกี่ยวข้องกับ theme ใน layer theme เพื่อให้คุณสามารถแทนที่และใช้โดยตรงได้ง่ายขึ้น สามารถเป็นแบบครบถ้วนหรือตามความต้องการ มันมาจากการกำหนดค่า theme ของคุณเสมอ

: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;
  /* ... */
}

ความเข้ากันได้กับ Presets อื่นๆ

PresetWind4 ปรับปรุงและเข้ากันได้กับ PresetWind3 เนื่องจากแพ็กเกจอื่นๆ ถูกพัฒนาขึ้นสำหรับ PresetWind3 ในตอนแรก อาจเกิดปัญหาบางอย่างเมื่อใช้ร่วมกัน ปัญหาที่ทราบ ได้แก่:

presetWebFonts

เมื่อใช้ presetWebFonts กับ PresetWind4 theme key fontFamily ไม่ได้รับการสนับสนุนอีกต่อไป โปรดปรับปรุงดังนี้:

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

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

presetLegacyCompat

ใน presetWind4 เราใช้โมเดลสี oklch เพื่อรองรับคอนทราสต์สีและการรับรู้สีที่ดีขึ้น ดังนั้นจึงไม่เข้ากันได้กับ presetLegacyCompat และ ไม่แนะนำ ให้ใช้ร่วมกัน

โปรดดูส่วน ความเข้ากันได้ สำหรับข้อมูลเพิ่มเติม

transformDirectives

transformDirectives ไม่ทำงานได้ดีกับ PresetWind4 มีปัญหาที่ทราบบางอย่าง ดังนั้นโปรดใช้ด้วยความระมัดระวัง

WARNING

• เมื่อใช้ @apply เพื่อประมวลผลกฎที่มี @property อาจเกิดความขัดแย้งระหว่างระดับ layer ที่แตกต่างกัน