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

أنا في اليوم ٤٥ من رحلتي في تعلم الـ Full-stack.

بالأمس تعلمت توجيه Express (Express routing) لصفحات HTML الثابتة. واليوم ركزت على Tailwind CSS.

لقد ابتعدت عن ملفات CSS الضخمة، وأصبحت أستخدم الآن سير عمل يعتمد على الأدوات المساعدة أولاً (utility-first workflow)، مما يجعل عملية التصميم أسرع.

يوفر لك Tailwind فئات أدوات مساعدة (utility classes)، حيث تستخدم هذه الفئات لبناء تخطيطات مخصصة مباشرة داخل ملف HTML الخاص بك.

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

  • قمت بتثبيت Tailwind باستخدام حزم npm بدلاً من CDN.
  • قمت بتثبيت النواة المجمعة (compiler core) باستخدام npm install -D tailwindcss.
  • قمت بإعداد التكوين باستخدام npx tailwindcss init.

تعلمت أيضاً كيف يقلل Tailwind من حجم الملف، حيث يستخدم تقنية tree-shaking لإزالة التنسيقات غير المستخدمة.

قمت بتكوين مسار المحتوى في tailwind.config.js لفحص ملفات HTML و JS الخاصة بي:

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

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

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