Day 3 / Hour 1

Tailwind Setup and Utilities

Document1 / 21

Recap จาก Day 2

ตอนนี้ project ของเรามีอะไรแล้ว

  • Next.js project
  • page.tsx
  • layout.tsx
  • globals.css
  • Issue type
  • mock data issues: Issue[]
  • IssueForm
  • IssueList
  • StatusBadge
  • route พื้นฐาน เช่น /issues, /issues/new, /issues/[id]

ปัญหาที่เริ่มเห็น

  • CSS ใน globals.css เริ่มยาว
  • บาง style ผูกกับ selector กว้างเกินไป
  • ถ้า component เยอะขึ้น การตั้ง class เองอาจเริ่มดูแลยาก
  • UI ยังเป็น static prototype มากกว่า application UI

Key Message

Day 3 เราจะทำให้ Next.js app พร้อมเป็น frontend CRUD prototype มากขึ้น โดยเริ่มจากปรับ UI ด้วย Tailwind CSS