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

الإعداد المسبق المدمج Tailwind CSS / Windi CSS لـ UnoCSS.

الكود المصدري

INFO

@unocss/preset-wind و @unocss/preset-uno تم إهمالهما وإعادة تسميتهما إلى @unocss/preset-wind3. يرث هذا الإعداد المسبق من @unocss/preset-mini.

التثبيت

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

TIP

يتم تضمين هذا الإعداد المسبق في حزمة unocss، يمكنك أيضاً استيراده من هناك:

import { presetWind3 } from 'unocss'

القواعد

الهدف الأساسي من هذا الإعداد المسبق هو توفير التوافق مع Tailwind CSS و Windi CSS. يجب ملاحظة أنه قد لا يتم ضمان التوافق الكامل. يرجى الرجوع إلى وثائقهم للاستخدام التفصيلي.

لجميع القواعد والإعدادات المسبقة المضمنة في هذا الإعداد المسبق، يرجى الرجوع إلى وثائقنا التفاعلية أو الانتقال مباشرة إلى الكود المصدري.

الميزات

الوضع الداكن

افتراضياً، يولد هذا الإعداد المسبق الوضع الداكن القائم على الفئة مع متغير dark:.

<div class="dark:bg-red:10" />

سيولد:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

الوضع الداكن القائم على استعلام الوسائط

لاستخدام الوضع الداكن القائم على استعلام الوسائط عالمياً، يمكنك تغيير التكوين لمتغير dark::

presetWind3({
  dark: 'media'
})

الآن

<div class="dark:bg-red:10" />

سيولد:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

الوضع الداكن القائم على استعلام الوسائط الاختياري

لاستخدام الوضع الداكن القائم على استعلام الوسائط الاختياري، يمكنك استخدام متغير @dark::

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

الاختلافات عن Tailwind CSS

علامات الاقتباس

لا يتم دعم استخدام علامات الاقتباس في القالب (الملفات المقصود معالجتها) بسبب كيفية عمل المستخرج. على سبيل المثال، لن تتمكن من كتابة before:content-['']. لهذه الحالات، قد تفضل إدخال أداة جديدة يمكنك تعيينها صراحة مثل class="before:content-empty".

background-position مع القيم التعسفية

Tailwind يسمح باستخدام قيم مخصصة لـ background-position باستخدام الصيغة العارية:

<div class="bg-[center_top_1rem]"></div>

سيقوم إعداد Wind المسبق بدلاً من ذلك بتفسير center_top_1rem كلون. استخدم بادئة position: لإنجاز نفس الشيء:

<div class="bg-[position:center_top_1rem]"></div>

الرسوم المتحركة

Tailwind CSS لديه رسوم متحركة مدمجة أقل، نحن ندعم بالكامل قواعد الرسوم المتحركة الخاصة به، وندمج داخلياً Animate.css لتوفير المزيد من تأثيرات الرسوم المتحركة.

يمكنك استخدام بادئة animate- لتوجيه IntelliSense للعثور على الرسوم المتحركة التي تحتاجها بسرعة.

TIP

لا ندمج أسماء الرسوم المتحركة المتعارضة من Tailwind و Animate.css. إذا كنت بحاجة إلى استخدام اسم الرسوم المتحركة من Animate.css، يرجى استخدام animate-<name>-alt.

على سبيل المثال

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

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

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

TIP

يمكنك أيضاً إضافة category لتجميع الرسوم المتحركة لإدارة أفضل. سيجعل هذا من السهل على الأدوات المصب استهلاك تأثيرات الرسوم المتحركة.

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

الاختلافات عن Windi CSS

نقاط التوقف

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

مسافات صيغة الأقواس

يستخدم هذا الإعداد المسبق _ بدلاً من , لاحترام المسافة في صيغة الأقواس.

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

نظراً لأن بعض قواعد CSS تتطلب , كأجزاء من القيمة، على سبيل المثال grid-cols-[repeat(3,auto)]

الميزات التجريبية

WARNING

يتضمن هذا الإعداد المسبق ميزات تجريبية قد يتم تغييرها بطرق كاسرة في أي وقت.

Media Hover

يعالج Media hover مشكلة sticky hover حيث يؤدي النقر على الهدف الذي يتضمن نمط hover على الهاتف المحمول إلى استمرار نمط hover هذا حتى النقر في مكان آخر.

نظراً لأن نمط :hover العادي مستخدم على نطاق واسع على الأرجح، يستخدم المتغير صيغة @hover للتمييز بينه وبين الزائف hover العادي.

سيخرج المتغير @hover-text-red:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

الخيارات

INFO

خيارات هذا الإعداد المسبق موروثة من @unocss/preset-mini.

important

• النوع: boolean | string
• افتراضي: false

يتيح لك خيار important التحكم في ما إذا كان يجب تمييز أدوات UnoCSS بـ !important. يمكن أن يكون هذا مفيداً حقاً عند استخدام UnoCSS مع CSS موجود يحتوي على محددات خصوصية عالية.

WARNING

سيؤدي استخدام هذا الخيار إلى تطبيق important على جميع الأدوات المُنشأة بواسطة UnoCSS. يمكنك استخدام متغير important: بدلاً من ذلك إذا كنت تقصد تطبيقه على أدوات محددة فقط.

ومع ذلك، يمكن أن يؤدي تعيين important إلى true إلى إدخال بعض المشكلات عند دمج مكتبات JS تابعة لجهات خارجية تضيف أنماط مضمنة إلى عناصرك. في تلك الحالات، تهزم أدوات !important في UnoCSS الأنماط المضمنة، مما قد يكسر التصميم المقصود.

للتغلب على هذا، يمكنك تعيين important إلى محدد ID مثل #app بدلاً من ذلك:

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

سيؤدي هذا التكوين إلى إضافة بادئة لجميع أدواتك بالمحدد المعطى، مما يزيد فعلياً من خصوصيتها دون جعلها !important فعلياً.

ستخرج الأداة dark:bg-blue:

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}