יום 45 בלימוד MERN Stack

אני ביום ה-45 במסע שלי להפוך למהנדס full-stack.

אתמול למדתי להגיש דפי HTML סטטיים באמצעות Express routing. היום שולטתי ב-Tailwind CSS באמצעות ה-Tailwind CLI.

אני מתרחק מקבצי CSS גדולים. אני עובר לשיטת עבודה של utility-first כדי לבנות layouts מהר יותר.

Tailwind לא מספק רכיבים מוכנים מראש. הוא מספק מחלקות עזר (utility classes) קטנות. המחלקות הללו מאפשרות לך לבנות עיצובים מותאמים אישית ישירות בתוך ה-HTML שלך.

הנה התהליך הטכני שלי:

  • התקנתי את Tailwind באמצעות npm במקום להשתמש בקישור CDN.
  • התקנתי את ליבת הקומפיילר באמצעות npm install -D tailwindcss.
  • אתחלתי את ההגדרות באמצעות npx tailwindcss init.

למדתי גם איך Tailwind מפחית את גודל הקובץ באמצעות tree-shaking. תהליך זה מסיר סגנונות (styles) שאינם בשימוש. הגדרתי את נתיבי התוכן שלי כך שהקומפיילר יסרוק את התיקיות הסטטיות שלי.

הגדרת ה-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