Mission 15: Tailwind คืออะไร

เป้าหมายของ Mission นี้: รู้จัก Tailwind CSS ว่าคืออะไร และเข้าใจว่ามัน เกี่ยวกับ CSS ที่เพิ่งเรียนมายังไง ก่อนได้ลองใช้จริงใน Chapter ถัดไป

Tailwind CSS คืออะไร

Tailwind คือไลบรารีที่ให้ class สำเร็จรูป มาแทนการเขียน CSS เอง — แต่ละ class ทำหน้าที่แค่อย่างเดียว (utility) และชื่อ class ก็บอกตรงตัวว่า มันตั้งค่า property ไหน

เทียบ CSS ที่เขียนเองกับ Tailwind

ทุกอย่างที่เขียนมาทั้ง Chapter นี้ มี "ชวเลข" เป็น Tailwind class ตรงๆ:

สังเกตว่า Tailwind class ไม่ได้ทำอะไรใหม่ — มันคือ CSS property/value เดิมที่เพิ่งเรียนมา แค่ตั้งชื่อย่อไว้ให้ ไม่ต้องเขียนไฟล์ CSS แยกอีกไฟล์ ใส่ class ที่ตัว HTML ได้เลย

ทำไมถึงมี Tailwind

เขียน CSS เองมีข้อดีคือควบคุมได้เต็มที่ แต่ข้อเสียคือต้องสลับไปมาระหว่างไฟล์ HTML กับ CSS ตลอด และต้องคิดชื่อ class เอง (.product-title, .card, ...) ทุกครั้ง — Tailwind ตัดขั้นตอนนี้ออกด้วยการให้ class สำเร็จรูปที่ใช้ได้ทันที

ในเวิร์กสเปซนี้ยังไม่ต้องใช้ Tailwind

Chapter ถัดไป (Framework Introduction) จะพาไปเปิดโปรเจค Next.js จริง ซึ่งติดตั้ง Tailwind ไว้ให้แล้ว จะได้ลองใช้ class พวกนี้ของจริงเป็นครั้งแรก

คำศัพท์สำคัญ (Vocabulary)