الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

wechat-mp-plugin

برنامج صغير Tailwind Webpack البرنامج المساعد

اسمح لبرنامجك الصغير باستخدام Tailwind/Windi CSS الأصلي

من Digital Creative، وهي شركة متخصصة في أبحاث وتصميم وتطوير المنتجات الرقمية ومقرها في شنغهاي.

تعرف علينا
  • ماذا نفعل
  • معلومات عنا
  • اتصل بنا

يوصى بقراءة الوثيقة المستقلة للحصول على تجربة قراءة أفضل ♥

يقدم

نظرًا لأن التطبيق الصغير نفسه لا يدعم بعض أحرف الهروب الخاصة (مثل [ ! . وما إلى ذلك) الموجودة في أسماء المحددات التي تم إنشاؤها بواسطة Tailwind/Windi CSS، فإن هذا يمنعك من استخدام بعض الميزات التي يجب استخدامها عند تطوير البرنامج. التطبيق الصغير بناء الجملة المرن ووظيفة الاستدلال التلقائي للقيم/القيمة المستخدمة في تطبيقات الويب، مثل w-[30px] translate-x-1/2 !bg-[#ff0000] وما إلى ذلك. وهذا بلا شك له تأثير كبير على كفاءة التنمية لدينا والعبء العقلي.

من أجل تجاوز هذا القيد، قمنا بتطوير هذا البرنامج الإضافي لمساعدتك في الحفاظ على تجربة تطوير متسقة للغاية مع تطوير تطبيقات الويب عند استخدام Tailwind/Windi CSS لتطوير البرامج الصغيرة، ولم تعد بحاجة إلى الاهتمام بالسلاسل غير الموجودة بدلاً من دعم مشكلة الاضطرار إلى تغيير طريقة الكتابة، استمر في كتابة نمط برنامجك المصغر وفقًا للتركيب الرسمي لـ Tailwind/Windi CSS ، ويتم التعامل مع أعمال التوافق خلفه بصمت من خلال هذا المكون الإضافي.

بالإضافة إلى ذلك، يدمج هذا البرنامج الإضافي أيضًا وظيفة التحويل التلقائي لقيم rpx . يمكن لهذه الوظيفة تحويل قيم وحدة rem و px التي كتبناها في ملف تكوين Tailwind/Windi CSS والكود المصدر تلقائيًا إلى قيم وحدة rpx في ملف النمط النهائي الذي تم إنشاؤه. يتيح ذلك للمطورين إعادة استخدام نفس تكوين السمة المستخدم في مشاريع الويب ويسمح للبرامج الصغيرة بمواصلة استخدام الميزات التي توفرها وحدات البكسل سريعة الاستجابة.

تعرف على المزيد حول كيفية عمل هذا البرنامج المساعد

اسمح لبرنامجك الصغير باستخدام Tailwind/Windi CSS الأصلي

بداية سريعة

اختر أحد أنواع البرامج المصغرة التي تناسبك لتثبيت المكون الإضافي

تطبيقات Webpack العادية (مع أخذ MPX كمثال)

تطبيقات Webpack العادية (مع أخذ MPX كمثال)

MPX، هو إطار عمل صغير مُحسّن عبر المحطات الطرفية يتمتع بخبرة تطوير ممتازة وتحسين متعمق للأداء.

نظرًا لأن إطار عمل MPX هو إطار عمل نموذجي محسّن لتطوير البرامج الصغيرة يستخدم Webpack كأداة إنشاء، فإن عرض التثبيت هذا يستخدم مشروع MPX كحالة نموذجية لتوضيح كيفية تثبيت المكونات الإضافية لمعظم مشاريع البرامج الصغيرة المشابهة لـ Webpack. تنطبق خطوات التثبيت التالية على نطاق واسع في مشاريع Webpack . بالنسبة لمعظم مشاريع برامج Webpack المصغرة، ما عليك سوى الرجوع إلى نفس خطوات التثبيت.

قم بتثبيت البرنامج المساعد Windics-webpack 

npm i windicss-webpack-plugin -D
ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

تكامل Windi CSS Webpack

قم بتثبيت @dcasia/mini-program-tailwind-webpack-plugin 

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

تحديث ملف تكوين حزمة الويب

باستخدام البرنامج المساعد Webpack 

 //webpack.base.conf.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )

module . exports = {
  plugins : [
    new WindiCSSWebpackPlugin ( ) ,
    new MiniProgramTailwindWebpackPlugin ( {
      // options
    } )
  ]
}

قم بإنشاء ملف تكوين Windi CSS جديد

قم بإنشاء ملف تكوين windi.config.js جديد في الدليل الجذر للمشروع 

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
    include : [ 'src/**/*.{css,html,mpx}' ] ,
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

ينطبق ملف تكوين Tailwind CSS هنا أيضًا

ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

قواعد توافق ملف تعريف Windi CSS

إدخال منتجات Windi CSS في ملف الإدخال 

// app.mpx
< style src =" windi.css " > </ style >

بالنسبة لتطبيقات Webpack الأخرى للمشروعات غير MPX، يمكنك الرجوع إلى طريقة مشابهة لإدخال windi.css في ملف الإدخال، مثل: 

 // main.js
import 'windi.css'
ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

تقديم ملفات نمط Windi CSS

ينهي

هل تبدأ في الاستمتاع بتجربة التطوير الفعالة التي تقدمها Windi CSS في مشاريع البرامج المصغرة؟

معلمات قابلة للتكوين

اسم يكتب تقصير يصف
EnableRpx منطقية true ما إذا كان سيتم تمكين التحويل التلقائي إلى قيمة وحدة rpx
عرض التصميم رقم 350 قيمة عرض البكسل لمسودة التصميم سيؤثر هذا الحجم على نسبة الحساب أثناء عملية تحويل rpx.
utilitiesSettings.spaceBetweenItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم المسافة بين الأدوات المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.divideItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم أدوات عرض Divide المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.

قضية

حالة التكامل: مشروع MPX

القلقاس الصغير

القلقاس الصغير

القلقاس، حل تطوير موحد متعدد المحطات

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

يتوافق مكون Taro الإضافي مع أطر عمل الواجهة الأمامية التالية

  • رد فعل
  • النظرة 2
  • النظرة 3
  • برياكت

وهو متوافق أيضًا مع استخدام Tailwind/Windi CSS في تطوير المكونات الأصلية المختلطة.

قم بتثبيت @dcasia/mini-program-tailwind-webpack-plugin 

 npm i @dcasia/mini-program-tailwind-webpack-plugin -D

باستخدام البرنامج المساعد تارو 

 // config/index.js
const config = {
  plugins : [
    [ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
      // ...options
    } ]
  ]
}

قم بإنشاء ملف تكوين Windi CSS جديد

قم بإنشاء ملف تكوين windi.config.js جديد في الدليل الجذر للمشروع 

 // windi.config.js
export default {
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

ينطبق ملف تكوين Tailwind CSS هنا أيضًا

ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

قواعد توافق ملف تعريف Windi CSS

إدخال منتجات Windi CSS في ملف الإدخال 

 // app.js
import 'windi.css' ;

ينهي

هل تبدأ في الاستمتاع بتجربة التطوير الفعالة التي تقدمها Windi CSS في Taro؟

معلمات قابلة للتكوين

اسم يكتب تقصير يصف
تمكين WindiCSS منطقية true ما إذا كان سيتم تمكين Windi CSS الذي يأتي مع المكون الإضافي أم لا
WindiCSSConfigFile خيط اقرأ ملف التكوين في الدليل الجذر للمشروع قم بتعيين المسار إلى ملف تكوين Windi CSS يدويًا إذا لزم الأمر
EnableRpx منطقية false ما إذا كان سيتم تمكين التحويل التلقائي إلى قيمة وحدة rpx (بما أن Taro يأتي مع هذه الوظيفة، فسيتم إيقاف تشغيلها افتراضيًا)
عرض التصميم رقم 375 قيمة عرض البكسل لمسودة التصميم سيؤثر هذا الحجم على نسبة الحساب أثناء عملية تحويل rpx.
utilitiesSettings.spaceBetweenItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم المسافة بين الأدوات المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.divideItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم أدوات عرض Divide المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.customComponents Array<string> [] يحتاج المطورون الذين يستخدمون Uno CSS كمحرك Atomic CSS إلى تكوينه وفقًا لحالة المشروع. بشكل افتراضي، يتم تضمين كافة أسماء المكونات التي تأتي مع البرامج المصغرة، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
EnableDebugLog منطقية false ما إذا كان سيتم تمكين طباعة سجل التشغيل الداخلي لهذا المكون الإضافي

قضية

  • حالة التكامل: مشروع Taro - React
  • حالة التكامل: مشروع Taro - Vue 2
  • حالة التكامل: مشروع Taro - Vue 3
التطبيق الصغير أحادي التطبيق

التطبيق الصغير أحادي التطبيق

uni-app، يتم تطويره مرة واحدة ويغطي محطات متعددة.

تحتوي هذه المقالة على عرضين توضيحيين لتثبيت Vue 3 وVue 2 من uni-app.

شرح تثبيت Vue 3

يرجى الرجوع إلى نوع البرنامج المصغر التالي: برنامج Vite المصغر العادي (مع أخذ uni-app كمثال)

شرح تثبيت Vue 2

قم بتثبيت البرنامج المساعد Windics-webpack 

npm i windicss-webpack-plugin -D
ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

تكامل Windi CSS Webpack

قم بتثبيت @dcasia/mini-program-tailwind-webpack-plugin 

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

قم بإنشاء ملف تكوين Vue جديد

قم بإنشاء ملف تكوين vue.config.js جديد في الدليل الجذر للمشروع واستخدم المكون الإضافي Webpack 

 // vue.config.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )

module . exports = {  
  configureWebpack : {  
    plugins : [  
      new WindiCSSWebpackPlugin ( ) ,
      new MiniProgramTailwindWebpackPlugin ( {
        // options
      } )
    ]  
  }  
}

قم بإنشاء ملف تكوين Windi CSS جديد

قم بإنشاء ملف تكوين windi.config.js جديد في الدليل الجذر للمشروع 

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

ينطبق ملف تكوين Tailwind CSS هنا أيضًا

ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

قواعد توافق ملف تعريف Windi CSS

إدخال منتجات Windi CSS في ملف الإدخال 

 // main.js
import 'windi.css'

ينهي

هل تبدأ في الاستمتاع بتجربة التطوير الفعالة التي تقدمها Windi CSS في مشاريع البرامج المصغرة؟

معلمات قابلة للتكوين

اسم يكتب تقصير يصف
EnableRpx منطقية true ما إذا كان سيتم تمكين التحويل التلقائي إلى قيمة وحدة rpx
عرض التصميم رقم 350 قيمة عرض البكسل لمسودة التصميم سيؤثر هذا الحجم على نسبة الحساب أثناء عملية تحويل rpx.
utilitiesSettings.spaceBetweenItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم المسافة بين الأدوات المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.divideItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم أدوات عرض Divide المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.customComponents Array<string> [] يحتاج المطورون الذين يستخدمون Uno CSS كمحرك Atomic CSS إلى تكوينه وفقًا لحالة المشروع. بشكل افتراضي، يتم تضمين كافة أسماء المكونات التي تأتي مع البرامج المصغرة، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.

قضية

حالة التكامل: مشروع uni-app Vue 2

تطبيقات عادية تشبه Vite (خذ تطبيق uni كمثال)

تطبيقات Vite العادية (خذ تطبيق uni-app كمثال)

uni-app، يتم تطويره مرة واحدة ويغطي محطات متعددة.

نظرًا لأن المشروع مبني على Vite عند استخدام Vue 3 لتطوير البرامج المصغرة في uni-app، فإن عرض التثبيت هذا يستخدم مشروع uni-app Vue 3 كحالة نموذجية لتوضيح كيفية توصيل معظم مشاريع البرامج المصغرة المشابهة لـ Vite . ثَبَّتَ. تنطبق خطوات التثبيت التالية على نطاق واسع على مشاريع Vite . بالنسبة لمعظم مشاريع التطبيقات الصغيرة المشابهة لـ Vite، ما عليك سوى الرجوع إلى نفس خطوات التثبيت.

قم بتثبيت vite-plugin-windicss وwindicss 

npm i vite-plugin-windicss windicss -D
ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

التكامل Windi CSS Vite

قم بتثبيت @dcasia/mini-program-tailwind-webpack-plugin 

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

تحديث ملف التكوين Vite

استخدم المكونات الإضافية في ملف التكوين vite.config.js 

 // vite.config.js
import WindiCSS from 'vite-plugin-windicss' ;
import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup' ;

export default {
  plugins : [
    WindiCSS ( ) ,
    MiniProgramTailwind ( )
  ]
}

قم بإنشاء ملف تكوين Windi CSS جديد

قم بإنشاء ملف تكوين windi.config.js جديد في الدليل الجذر للمشروع 

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

ينطبق ملف تكوين Tailwind CSS هنا أيضًا

ارجع إلى وثائق Windi CSS الرسمية لمزيد من التفاصيل

قواعد توافق ملف تعريف Windi CSS

إدخال منتجات Windi CSS في ملف الإدخال 

 // main.js
import 'virtual:windi.css'

ينهي

هل تبدأ في الاستمتاع بتجربة التطوير الفعالة التي تقدمها Windi CSS في مشاريع البرامج المصغرة؟

معلمات قابلة للتكوين

اسم يكتب تقصير يصف
EnableRpx منطقية true ما إذا كان سيتم تمكين التحويل التلقائي إلى قيمة وحدة rpx
عرض التصميم رقم 350 قيمة عرض البكسل لمسودة التصميم سيؤثر هذا الحجم على نسبة الحساب أثناء عملية تحويل rpx.
utilitiesSettings.spaceBetweenItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم المسافة بين الأدوات المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.divideItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم أدوات عرض Divide المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.customComponents Array<string> [] يحتاج المطورون الذين يستخدمون Uno CSS كمحرك Atomic CSS إلى تكوينه وفقًا لحالة المشروع. بشكل افتراضي، يتم تضمين كافة أسماء المكونات التي تأتي مع البرامج المصغرة، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.

قضية

حالة التكامل: مشروع uni-app Vue 3

التطبيقات المطورة محليًا أو المصممة خصيصًا

برامج صغيرة للتطوير الأصلي أو أدوات البناء المخصصة

بغض النظر عن أداة التجميع أو أداة سير العمل التي تم تطوير مشروعك عليها، طالما أن هناك خدمة مراقبة ومعالجة الملفات قابلة للبرمجة، يمكنك تخصيصها. ولكن الشيء الوحيد الذي يجب توضيحه هنا هو أننا إذا أردنا دمج وظائف هذا المكون الإضافي استنادًا إلى وضع التطوير الأصلي، فيجب علينا أن نبدأ مجموعة من خدمات مراقبة ومعالجة الملفات القابلة للبرمجة كأساس للمكون الإضافي. يتم توفير هذه الخدمة عادةً من خلال اكتمال أدوات الطرف الثالث التي تم تكوينها مثل Webpack وGulp.

المطورين الذين يستخدمون Tailwind/Windi CSS CLI يرجى القراءة

إذا قمت بتطوير واجهة مستخدم برنامج صغير من خلال واجهة سطر الأوامر الرسمية لـ Tailwind/Windi CSS، لسوء الحظ، نظرًا لأن واجهة سطر الأوامر لا تدعم آلية المكون الإضافي ولا يمكنها دعم تعديل ملفات القالب، فلا يمكننا تخصيصها على هذا الأساس.

لقد قمنا بفصل الوظائف الأساسية لهذا المكون الإضافي وتجميعها في ملف universal-handler.js . إذا كنت تريد دمج الوظائف الأساسية لهذا المكون الإضافي في أداة إنشاء مخصصة، فيمكنك إدخال universal-handler في سير العمل. منطق: 

 const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )

قالب العملية: 

 const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )

أسلوب المعالجة: 

 const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )

يمكنك بعد ذلك إرجاع السلاسل التي تمت معالجتها إلى سير العمل الأصلي لإنشاء الملف النهائي.

تعرف على المزيد حول التفاصيل العملية للتنفيذ المخصص

برنامج صغير يدمج التنفيذ المخصص لـ Windi CSS

معلمات قابلة للتكوين

اسم يكتب تقصير يصف
EnableRpx منطقية false ما إذا كان سيتم تمكين التحويل التلقائي إلى قيمة وحدة rpx
عرض التصميم رقم 350 قيمة عرض البكسل لمسودة التصميم سيؤثر هذا الحجم على نسبة الحساب أثناء عملية تحويل rpx.
utilitiesSettings.spaceBetweenItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم المسافة بين الأدوات المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.divideItems Array<string> [] اسم المكون التابع في الحاوية التي تستخدم أدوات عرض Divide المساعدة. يتم تضمين أربعة مكونات شائعة، وهي العرض والزر والنص والصورة، بشكل افتراضي، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.
utilitiesSettings.customComponents Array<string> [] يحتاج المطورون الذين يستخدمون Uno CSS كمحرك Atomic CSS إلى تكوينه وفقًا لحالة المشروع. بشكل افتراضي، يتم تضمين كافة أسماء المكونات التي تأتي مع البرامج المصغرة، لذلك في معظم الحالات لا يحتاج المطورون إلى تكوين هذا العنصر. إذا كنت بحاجة إلى إضافة مكونات جديدة، يمكنك إضافة أسماء مكونات جديدة في المصفوفة.

قضية

حالة التكامل: تنفيذ مخصص يعتمد على Gulp

تتخذ خطوات العرض التوضيحي دمج Windi CSS كمثال (يتمتع Windi CSS بتجربة أفضل ومتوافق مع Tailwind CSS)

تعلم المزيد عن Windi CSS

الرياح CSS

فخ

  • من أجل تمكين أنماط المكونات من التأثير على منتجات Tailwind/Windi's CSS في البرنامج المصغر، نحتاج إلى تعيين نطاق النمط styleIsolation في ملف تكوين JSON لكل مكون. وإلا، حتى إذا كان Tailwind/Windi CSS يعمل بشكل طبيعي، فلن يتمكن من ذلك يمكن استخدامها.

    لا يتأثر برنامج القلقاس بهذا القيد 

    {
  "component" : true ,
  "styleIsolation" : " apply-shared "
}
    القضايا ذات الصلة

    العدد رقم 1

  • نظرًا لأن وظيفة إعادة التحميل السريع الحالية لأدوات مطور WeChat لا يمكنها اكتشاف التغييرات في محتوى ملف wxss المستورد بواسطة @import في ملف النمط، فعند تمكين وظيفة إعادة التحميل السريع للتطوير، لن يتبع المحاكي تغييراتك على Tailwind/Windi قم بتحديث واجهة المستخدم بناءً على التغييرات. في الوقت الحالي، يدرك مسؤولو WeChat وجود هذا الخطأ قبل إصلاح الخطأ، نوصي بإيقاف تشغيل إعادة التحميل السريع أثناء التطوير واستخدام التحديث التلقائي التقليدي للصفحة لمعاينة كل تحديث لواجهة المستخدم. حاليًا، تم إصلاح هذه المشكلة في WeChat Developer Tools 1.06.2205231 RC.

    القضايا ذات الصلة

    العدد رقم 3

  • بالنسبة للإعلان عن فئات الأنماط الخارجية externalClasses في التطبيق الصغير الأصلي، يدعم المكون الإضافي فقط تعريف اسم externalClasses كـ 'class' ولا يدعم الأسماء الأخرى. 

     Component ( {
  externalClasses : [ 'class' ]
} )
    القضايا ذات الصلة

    العدد رقم 44

مقارنة الوظائف

قواعد اللغة لا تستخدم هذا البرنامج المساعد استخدم هذا البرنامج المساعد
عادي : h-10 text-white ✅ ✅
تستنتج القيم/القيمة التعسفية : t-[25px] bg-[#ffffff] ✅
الكسر : translate-x-1/2 w-8.5 ✅
هام : !p-1 ✅
استنتاج قيمة RGB : text-[rgb(25,25,25)] ✅
المسافة بين : space-y-2 space-y-reverse ✅
عرض التقسيم : divide-x-2 divide-y-reverse ✅
المتغيرات : dark:bg-gray-800 ✅
مجموعات المتغيرات : hover:(bg-gray-400 font-medium) ✅
مستجيب : md:p-2 ✅
محدد عالمي : * ✅
تم تحويل قيمة rpx من قيمة rem و px ✅

نطاق التوافق

  • حزمة الويب >= 4.0.0
  • القلقاس >= 3.4.0
  • مبكس >= 2.7.5
  • uni-app
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل