วันที่ 45 ของการเรียนรู้ MERN Stack

วันที่ 45 ของการเรียนรู้ MERN Stack

ผมเดินทางมาถึงวันที่ 45 แล้วในเส้นทางการเป็น full-stack engineer

เมื่อวานนี้ ผมได้เรียนรู้วิธีการ serve หน้า HTML แบบ static ด้วย Express routing ส่วนวันนี้ ผมได้ฝึกฝน Tailwind CSS จนคล่องโดยใช้ Tailwind CLI

ผมกำลังเปลี่ยนจากการใช้ไฟล์ CSS ขนาดใหญ่ มาเป็นการใช้ workflow แบบ utility-first เพื่อสร้าง layout ได้รวดเร็วยิ่งขึ้น

Tailwind ไม่ได้ให้ component สำเร็จรูปมาให้ แต่จะให้ utility classes ขนาดเล็ก ซึ่งคลาสเหล่านี้ช่วยให้คุณสร้างดีไซน์แบบ custom ได้โดยตรงใน HTML ของคุณ

นี่คือขั้นตอนทางเทคนิคของผม:

• ผมติดตั้ง Tailwind โดยใช้ npm แทนการใช้ลิงก์ CDN
• ผมติดตั้ง compiler core ด้วย npm install -D tailwindcss
• ผมเริ่มต้นการตั้งค่าด้วย npx tailwindcss init

ผมยังได้เรียนรู้วิธีที่ Tailwind ช่วยลดขนาดไฟล์ผ่าน tree-shaking ซึ่งกระบวนการนี้จะลบสไตล์ที่ไม่ได้ใช้งานออกไป ผมได้ตั้งค่า content paths เพื่อให้ compiler ทำการสแกนโฟลเดอร์ static ของผม

การตั้งค่า 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