يوضح هذا المنشور جميع الجوانب الممكنة لإضافة 'أنماط أساسية' في Tailwind CSS.
كيفية إضافة أنماط 'أساسية' في Tailwind؟
يأتي 'Tailwind CSS' بالطرق الثلاث التالية لإضافة الأنماط 'الأساسية' في محتوى HTML بأكمله أو في عنصر معين:
- استخدم 'CSS' لإضافة أنماط أساسية في Tailwind.
- استخدم 'المكون الإضافي' لإضافة أنماط أساسية في Tailwind.
دعونا نستكشفها واحدة تلو الأخرى.
المتطلبات الأساسية
قبل الانتقال إلى التطبيق العملي ، أولاً ، ألق نظرة على المشروع الذي تم إنشاؤه حديثًا باسم 'Linuxhint' والذي يُستخدم لإضافة 'الأنماط الأساسية':
هيكل ملف المشروع
الآن ، انتقل إلى ملف 'index.html' وألق نظرة على كود HTML الخاص به:
< لغة البرمجة >< رأس >
< وصلة href = '/dist/output.css' rel = 'ورقة الأنماط' >
< / رأس >
< جسم >
< h2 فصل = 'تسطير وسط النص خط غامق نص وردي -600' > مرحبًا بك في Linuxhint! < / h2 > < ر >
< h3 فصل = 'text-center-font-bold text-orange-600' > البرنامج التعليمي: إضافة أنماط أساسية في Tailwind. < / h3 > < ر >
< / جسم >
في سطور الكود أعلاه:
انتاج |
يتم عرض إخراج الكود أعلاه هنا:
الآن ، استخدم الطريقة التي تمت مناقشتها لتخصيص كود HTML أعلاه عن طريق إضافة الأنماط الأساسية. لنبدأ بطريقة Tailwind 'CSS'.
الطريقة الأولى: استخدم CSS لإضافة 'أنماط أساسية' في Tailwind
إن أبسط وأسهل طريقة لإضافة نمط أساسي لعنصر HTML المحدد هي إضافتها في ملف CSS الرئيسي للمشروع. دعونا نؤدي هذه المهمة عمليا باتباع الخطوات المحددة.
الخطوة 1: افتح ملف CSS
أولاً ، افتح ملف CSS الرئيسي ، أي ' style.css 'الذي يحتوي على طبقات' base 'و' المكونات 'و' الأدوات المساعدة 'المضمنة في Tailwind:
الخطوة 2: أضف CSS
بعد ذلك ، أضف النمط 'الأساسي' لعناصر HTML المحددة '
' و '' من خلال تطبيق الفئات باستخدام ' @يتقدم 'التوجيه في الطبقة' الأساسية 'بمساعدة' @طبقة 'الكلمة الرئيسية. تضيف الكلمات الأساسية 'layer' الفئات المحددة على الطبقة 'الأساسية' المحددة: @ طبقة القاعدة {
h2 {
apply text-3xl ؛
}
h3 {
apply text-xl ؛
}
}
h2 {
apply text-3xl ؛
}
h3 {
apply text-xl ؛
}
}
في سطور الرمز أعلاه ، ' حجم الخط يتم تطبيق فئة 'على عنصري'
'و' 'لتكبيرهما حتى الحجم المحدد ، على التوالي:
احفظ (Ctrl + S) الملف.
الخطوة 3: الإخراج
الآن ، قم بتشغيل الكود في الخادم المباشر وشاهد الإخراج ، على النحو التالي:
هنا ، يُظهر الناتج أنه تم تطبيق فئة Tailwind “Font Size” بنجاح على العنصر المحدد في الطبقة الأساسية.
ملحوظة : يتم استخدام نفس الأسلوب مع جميع فئات Tailwind CSS الأخرى.
الطريقة 2: استخدم المكون الإضافي لإضافة 'أنماط أساسية' في Tailwind
هناك طريقة أخرى مفيدة لإضافة أنماط 'أساسية' وهي كتابة ' توصيل في 'واستخدم' addBase () ' وظيفة. تساعد هذه الوظيفة في تسجيل فصول جديدة في ' قاعدة 'توجيه الطبقة. تُستخدم هذه الوظيفة في ملف Tailwind 'tailwind.config.js'. دعونا نفعل ذلك عمليا.
الخطوة 1: تحديد وظيفة 'addBase ()'
أولاً ، انتقل إلى ' Tailwind.config.js 'ملف التكوين وإضافة الأنماط الأساسية من البرنامج المساعد واستدعاء الوظيفة' addBase () ':
حفظ الملف.
الخطوة 2: الإخراج
أخيرًا ، قم بتشغيل كود HTML المحدد وشاهد الإخراج:
كما رأينا ، يتم تطبيق فئة Tailwind “Font Size” المحددة في وظيفة “addBase ()” ككائن JavaScript على عناصر HTML المحددة.
خاتمة
يمكن إضافة أنماط قاعدة Tailwind بسهولة باستخدام ' CSS 'في ملف CSS الرئيسي و' توصيل في ' مع ال ' addBase () ”في ملف التكوين. تعتبر طريقة 'CSS' أبسط طريقة لأنها تحدد فقط الأنماط الأساسية في الطبقة 'الأساسية' وتنفذها تلقائيًا على العنصر المحدد. من ناحية أخرى ، فإن قسم 'المكوِّن الإضافي' في ' Tailwind.config.js يتطلب ملف 'addBase ()' وظيفة لتعريف الأنماط الأساسية ككائنات JavaScript. يوضح هذا المنشور جميع الجوانب الممكنة لإضافة أنماط أساسية في Tailwind CSS.