tailwind material 3

مواد Tailwind 3

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

الأمر في المحطة الخاصة بك:

 npm i tailwind-materilal-3

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

كيفية استخدام

لاستخدام مادة Tailwind 3 ، تأكد أولاً من تثبيت CSS Tailwind في مشروعك. ثم ، ما عليك سوى استيراد المكونات المطلوبة من المكتبة واستخدامها في رمز HTML الخاص بك.

يرجى اتباع التعليمات

الخطوة 1

قم بتثبيت tailwindcss عبر NPM ، وقم بإنشاء ملف tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

الخطوة 2

تثبيت tailwind-material-3 عبر NPM.

npm i tailwind-material-3 tailwind-material-colors

الخطوة 3

أضف المسارات إلى جميع ملفات القالب والألوان وغيرها من التكوين في ملف tailwind.config.js .

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

الخطوة 4

أضف توجيهات @tailwind لكل من طبقات Tailwind إلى ملف CSS الرئيسي الخاص بك.

@tailwind base ;
@tailwind components ;
@tailwind utilities ;

الخطوة 5

ابدأ باستخدام المكونات في رمز HTML الخاص بك!

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

هذا كل شيء! أنت الآن تعرف كيفية استخدام المواد Tailwind 3 لتبسيط عملية تطوير واجهة المستخدم الخاصة بك. جربها ونرى كيف يمكن أن تساعدك على توفير الوقت والجهد في بناء واجهات جميلة وعملية. إذا كان لديك أي أسئلة أو تعليقات ، فلا تتردد في التواصل معنا. ترميز سعيد!