Mission 6: Tailwind ในโปรเจคจริง

เป้าหมายของ Mission นี้: ใช้ Tailwind utility class ในโปรเจคจริงเป็นครั้งแรก

ทวนความจำจาก Chapter 3

จำได้ไหมว่า Chapter 3 (CSS พื้นฐาน) ปิดท้ายด้วยมิชชั่นทฤษฎีที่บอกว่า Tailwind คือ "ชวเลข" ของ CSS ที่เพิ่งเขียนมา — วันนี้ได้เวลาใช้จริงแล้ว

ในโปรเจค Next.js ไม่ต้องเขียนไฟล์ CSS แยก

ต่างจาก Chapter 3 ที่ต้องเขียนไฟล์ style.css แยกเอง — โปรเจค Next.js ที่ เปิดมาตั้งแต่ Mission 1 ติดตั้ง Tailwind ไว้ให้แล้ว (ผ่านไฟล์ app/globals.css ที่มี @import "tailwindcss";) แค่ใส่ class ที่ตัว element ตรงๆ ก็ใช้ได้ทันที

Demo

<h1 class="text-blue-600">สวัสดี Tailwind!</h1>

ทวน mapping จาก Chapter 3: text-blue-600 = color: #2563eb; (ประมาณ) — class เดิมที่เรียนตอนท้าย Chapter 3 ใช้ได้จริงตรงนี้เลย