كيفية تكوين مسارات النماذج في Tailwind CSS

يوضح هذا المنشور الإجراء الخاص بتكوين مسارات القوالب في Tailwind CSS.

كيفية تكوين مسارات النماذج في Tailwind CSS؟

ال ' Tailwind.config.js 'لتهيئة مسارات النموذج التي يريد المستخدم تضمين Tailwind CSS فيها. إنه غير موجود افتراضيًا ولكن يمكن إنشاؤه في المشروع باستخدام مدير الحزم 'npm'.

ينفذ هذا القسم بعض الخطوات الأساسية لتهيئة مسارات القالب في ملف 'tailwind.config.js'.

ملحوظة : لتنفيذ 'Tailwind CSS' ، عليك أولاً تثبيت ' Node.js 'في نظامك عبر الرابط المقدم' https://nodejs.org/en 'لتنفيذ الأوامر.

الخطوة 1: تثبيت 'TailwindCSS'
أولاً ، قم بإنشاء مشروع جديد باسم 'مشروع 1' وافتحه في محرر الكود. الآن ، افتح Terminal الجديد وقم بتثبيت 'Tailwind CSS' بمساعدة الأمر التالي:

في الأمر أعلاه ، ' npm 'هو مدير حزمة العقدة الذي يثبّت' TailwindCSS '، على النحو التالي:

يوضح الناتج هنا أن 'Tailwind CSS' وحزمها قد تم تنزيلها بنجاح.

الخطوة 2: أنشئ ملف تهيئة Tailwind
بعد ذلك ، أنشئ ملف تكوين Tailwind CSS ' Tailwind.config.js 'لتوسيع وظائفه مثل تحديد مسارات قالب HTML ، والفئات المعرفة من قبل المستخدم ، والعديد من الوظائف الأخرى باستخدام هذا الأمر:

يوضح الإخراج أنه تم إنشاء ملف التكوين المحدد. الآن ، ألق نظرة على ' Tailwind.config.js ' ملف:

الخطوة 3: أضف توجيهات Tailwind إلى ملف CSS الرئيسي
الآن ، لإضافة وظائف خاصة إلى مشروع Tailwind الذي تم إنشاؤه ، أضف توجيهات Tailwind الثلاثة التالية الموجودة مسبقًا في ' style.css ' ملف:

في كتلة التعليمات البرمجية أعلاه:

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

يمكن رؤية هذه التوجيهات في النافذة التالية:

الخطوة 4: بناء CSS
الآن ، أنشئ CSS باستخدام أداة Tailwind CLI بتنفيذ الأمر التالي. سيقوم بفحص جميع ملفات القوالب وإنشاء CSS في ' Dist / output.css ' ملف:

يمكن ملاحظة أن الأمر أعلاه تم تنفيذه بنجاح. الآن ، تبدو بنية ملف 'المشروع 1' كما يلي:

الخطوة 5: إنشاء قالب HTML وتكوين مساره
أنشئ نموذج HTML الذي يريد المستخدم فيه تضمين 'Tailwind CSS' ثم تكوين مساره في ' Tailwind.config.js '. دعونا أولاً نلقي نظرة على نموذج HTML التالي ' index.html ':

في سطور الكود أعلاه:

• يستخدم قسم 'الرأس' ' <ارتباط> 'لربط ملف CSS المُنشأ / المترجم' /dist/output.css 'بملف HTML الموجود' index.html '.
• يحدد قسم 'النص الأساسي' أولاً '

  'التي تحدد العنوان الفرعي الأول باستخدام فئة Tailwind' محاذاة النص 'لضبط محاذاته عند' المركز '،' وزن الخط 'إلى' غامق 'النص ،' لون الخط 'لإضافة اللون المحدد ، و' لون الخلفية 'لتطبيق لون الخلفية المحدد ، على التوالي.

• بعد ذلك ، '

  ' و ال '

  'تستخدم أيضًا فئات Tailwind التي تمت مناقشتها أعلاه لتصميم محتواها.

تكوين مسار قالب HTML
بعد ذلك ، افتح ' Tailwind.config.js 'وإضافة الروابط أو المسار في قسم' المحتوى 'في ملف نموذج HTML ، مثل' index.html ':

يضعط ' السيطرة + S. 'لحفظ التغييرات الجديدة.

الخطوة السادسة: تنفيذ كود HTML
أخيرًا ، نفِّذ شفرة HTML 'index.html' في الخادم المباشر وشاهد ناتجها:

انتاج |

كما رأينا ، يُظهر الإخراج محتوى HTML المصمم بمساعدة Tailwind CSS.

خاتمة

تستخدم Tailwind CSS ' Tailwind.config.js ”لتكوين مسارات قالب HTML التي تم إنشاؤها. وهي تحدد ' محتوى 'الذي يتضمن المسار الدقيق لجميع قوالب HTML وملفات المصدر التي تحتوي على أسماء فئات Tailwind ومكونات JavaScript. يقوم بمسح ملف HTML المحدد ثم يقوم بتنفيذ Tailwind CSS في محتواه. يوضح هذا المنشور الإجراء الكامل لتهيئة مسارات القوالب في Tailwind CSS.