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

ผมกำลังเดินทางบนเส้นทาง full-stack เป็นวันที่ 45 แล้ว

เมื่อวานผมได้เรียนรู้เรื่อง Express routing สำหรับหน้า HTML แบบ static ส่วนวันนี้ผมเน้นไปที่ Tailwind CSS

ผมเปลี่ยนจากการใช้ไฟล์ CSS ขนาดใหญ่ มาเป็นการใช้ workflow แบบ utility-first แทน ซึ่งช่วยให้การทำงานด้านดีไซน์รวดเร็วขึ้น

Tailwind มี utility classes ให้คุณใช้งาน โดยคุณสามารถใช้คลาสเหล่านี้เพื่อสร้าง layout แบบกำหนดเองได้โดยตรงใน HTML ของคุณ

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

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

ผมยังได้เรียนรู้อีกว่า Tailwind ช่วยลดขนาดไฟล์ได้อย่างไร โดยมันใช้ tree-shaking เพื่อลบสไตล์ที่ไม่ได้ใช้งานออกไป

ผมได้ตั้งค่า content path ใน 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