יום 45 של למידת MERN Stack

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

אתמול למדתי Express routing עבור דפי HTML סטטיים. היום התמקדתי ב-Tailwind CSS.

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

Tailwind מספקת לך utility classes. אתה משתמש במחלקות הללו כדי לבנות פריסות (layouts) מותאמות אישית ישירות בתוך ה-HTML שלך.

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

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

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

הגדרתי את נתיב התוכן ב-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