اليوم ٤٥ من تعلم MERN Stack

لقد أكملت ٤٥ يومًا في رحلتي لأصبح مهندس Full-stack.

بالأمس، تعلمت كيفية تقديم صفحات HTML ثابتة باستخدام Express routing. واليوم، أتقنت Tailwind CSS باستخدام Tailwind CLI.

أنا أتجه بعيدًا عن ملفات CSS الضخمة، وأنتقل إلى سير عمل يعتمد على "utility-first" لبناء التخطيطات بشكل أسرع.

لا يوفر Tailwind مكونات جاهزة، بل يوفر فئات utility صغيرة. تتيح لك هذه الفئات بناء تصميمات مخصصة مباشرة في HTML الخاص بك.

إليكم عمليتي التقنية:

  • قمت بتثبيت Tailwind باستخدام npm بدلاً من استخدام رابط CDN.
  • قمت بتثبيت نواة المترجم باستخدام npm install -D tailwindcss.
  • قمت بتهيئة الإعدادات باستخدام npx tailwindcss init.

تعلمت أيضًا كيف يقلل Tailwind حجم الملف من خلال عملية tree-shaking. تقوم هذه العملية بإزالة الأنماط غير المستخدمة. قمت بتهيئة مسارات المحتوى (content paths) بحيث يقوم المترجم بفحص المجلدات الثابتة الخاصة بي.

إعداد tailwind.config.js الخاص بي:

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

يضمن هذا الإعداد بقاء ملف CSS النهائي صغيرًا وسريعًا.

المصدر: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3