Day 3 / Hour 1

Tailwind Setup and Utilities

Document1 / 21

Recap จาก Day 2

หลังจบ Day 2 Project ของเรามี:

  • Component IssueForm, IssueList และ StatusBadge
  • Type และ Mock Data ที่แยกเป็นไฟล์กลาง
  • หน้า /, /issues, /issues/new และ /issues/[id]
  • Navigation ที่ใช้ร่วมกันทุกหน้าผ่าน app/layout.tsx
  • Custom CSS ทั้งหมดอยู่ใน app/globals.css

Project ทำงานได้แล้ว แต่เมื่อ Component เพิ่มขึ้น CSS กลางจะยาวขึ้นและต้องสลับไฟล์ไปมาระหว่าง TSX กับ CSS

Hour นี้เราจะเริ่มย้าย Style มาไว้ใกล้ UI ด้วย Tailwind โดยยังไม่เปลี่ยนข้อมูลหรือการทำงานของระบบ