الإعداد المسبق Wind4

الإعداد المسبق المدمج 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 لمعرفة دعم المتصفح والتوافق.

السمة

سمة PresetWind4 متطابقة تقريباً مع سمة PresetWind3، لكن تم تعديل بعض مفاتيح السمة.

WARNING

يرجى ملاحظة عند التبديل إلى PresetWind4، راجع الجدول أدناه للتحقق من تكوين مفتاح السمة الخاص بك وإجراء التعديلات المناسبة.

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 هو تكوين سمة افتراضي عالمي سيتم تطبيقه على أنماط reset أو استخدامه كقيم افتراضية لقواعد معينة.

أدناه القيم الافتراضية لـ Theme.defaults، والتي يمكنك تجاوزها في تكوين السمة الخاص بك.

انقر لعرض القيم الافتراضية

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، مع التغييرات المهمة التالية.

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

في PresetWind4، نحاذي أنماط إعادة التعيين مع tailwind4 وندمجها داخلياً. لا تحتاج إلى تثبيت أي حزمة CSS reset إضافية مثل @unocss/reset أو normalize.css.

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

تحتاج فقط إلى التحكم في ما إذا كان سيتم تمكين أنماط إعادة التعيين من خلال مفتاح:

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

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

محلل الأدوات

في PresetWind4، قمنا بترقية خطاف postProcess لتوفير واجهة برمجة تطبيقات أكثر إيجازاً. يمكنك الآن تخصيص utilities مباشرة في الإعداد المسبق.

على سبيل المثال، إذا كنت تريد استخدام الإعداد المسبق presetRemToPx لتحويل rem إلى px، لم تعد بحاجة إلى استيراد هذا الإعداد المسبق بشكل منفصل حيث يوفر presetWind4 هذه الوظيفة داخلياً.

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

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

يمكنك تخصيص المزيد من مجموعات المحلل لمعالجة utilities وإخراج CSS الذي تريده.

للطرق التنفيذية المحددة، يرجى الرجوع إلى postProcess أو حالة اختبار presetWind4

Preflight السمة

اختر كيفية إنشاء متغيرات CSS للسمة.

سيقوم محرك UnoCSS مع تثبيت presetWind4 تلقائياً بجمع التبعيات على السمة عند تحليل الأدوات وإنشاء متغيرات CSS في النهاية.

• true: إنشاء مفاتيح السمة بالكامل.
• false: تعطيل مفاتيح السمة. (غير موصى به ⚠️)
• 'on-demand': إنشاء مفاتيح السمة فقط عند الاستخدام. -> ✅ (افتراضياً)

CSS المُنشأ

في إخراج PresetWind4، تمت إضافة طبقتين جديدتين: theme و cssvar-property.

اسم الطبقة	الوصف	الترتيب
cssvar-property	خصائص CSS المعرفة بواسطة @property	-200
theme	متغيرات CSS المتعلقة بالسمة	-150

طبقة cssvar-property

لقد استخدمنا @property لتعريف خصائص CSS في العديد من القواعد لتحقيق أداء أفضل وحجم أصغر.

على سبيل المثال، أدوات شائعة الاستخدام مثل text-op-xx و bg-op-xx وما إلى ذلك.

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

طبقة theme

لقد وضعنا متغيرات CSS المتعلقة بالسمة في طبقة 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;
  /* ... */
}

التوافق مع الإعدادات المسبقة الأخرى

PresetWind4 يعزز ويتوافق مع PresetWind3. نظراً لأن الحزم الأخرى تم تطويرها أصلاً لـ PresetWind3، قد تنشأ بعض المشكلات عند استخدامها معاً. تشمل المشكلات المعروفة:

presetWebFonts

عند استخدام presetWebFonts مع PresetWind4، لم يعد مفتاح سمة 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، قد تحدث تعارضات بين مستويات الطبقات المختلفة.