Tailwind Essentials

หัวข้อนี้คืออะไร

Tailwind CSS เป็น CSS framework ที่ใช้แนวคิด utility-first — แทนที่จะเขียน CSS rule ใหม่ทุกครั้งที่ต้องการ style ใหม่ เราใช้ class เล็ก ๆ ที่มีอยู่แล้วในชุด class ของ Tailwind มาประกอบกัน ตัวอย่างเช่น ถ้าต้องการปุ่มสีน้ำเงิน มีพื้นหลังกลม ตัวอักษรขาว แทนที่จะเขียน CSS แยกไฟล์: แนวทาง Traditional: - เขียน .btn { background: blue; color: white; border-radius: 0.5rem; padding: 0.5rem 1rem; } - แล้วใส่ class="btn" ใน HTML แนวทาง Tailwind: - ใส่ class="bg-blue-500 text-white rounded-lg px-4 py-2" ลงใน HTML เลยทันที - ไม่ต้องสลับไปไฟล์ CSS แต่ละ class ใน Tailwind ทำหน้าที่เดียว เช่น bg-blue-500 ทำแค่เปลี่ยนสีพื้นหลัง, text-white ทำแค่เปลี่ยนสีตัวอักษร

<!-- Traditional CSS -->
<button class="btn">คลิกฉัน</button>

/* CSS ไฟล์แยก */
.btn {
  background-color: #3b82f6;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  font-weight: 600;
}

<!-- Tailwind -->
<button class="bg-blue-500 text-white rounded-lg px-4 py-2 font-semibold border-none">
  คลิกฉัน
</button>

/* ไม่ต้องเขียน CSS ใหม่เลย! */

ทำไมหัวข้อนี้สำคัญ

Tailwind CSS กลายเป็น framework ที่ได้รับความนิยมสูงที่สุดในโลก CSS ปัจจุบัน บริษัทขนาดใหญ่อย่าง Vercel, GitHub, Shopify ต่างใช้ Tailwind การเข้าใจแนวคิด utility-first ไม่ได้มีประโยชน์แค่กับ Tailwind เท่านั้น แต่ยังช่วยให้เข้าใจว่าทำไม utility classes ถึงถูกนำมาใช้บ่อย และเมื่อไหรที่ควรใช้แนวทางนี้ นอกจากนี้ เมื่อเข้าใจ concept แล้ว การเรียนรู้ class ใหม่ ๆ ใน Tailwind จะเร็วมาก เพราะชื่อ class สื่อความหมายตรงตัว เช่น flex-col หมายถึง flex-direction: column, text-xl หมายถึง font-size ขนาด xl ใน playground ของบทนี้ เราโหลด Tailwind CSS ผ่าน CDN browser build ดังนั้นทุก class ที่พิมพ์ลงไปจะทำงานจริงผ่าน Tailwind โดยไม่ต้องติดตั้งหรือ build อะไรทั้งนั้น

ตัวอย่างจากชีวิตจริง

ลองนึกภาพ "กล่องเลโก้" — Tailwind คือชุดเลโก้ที่มีชิ้นส่วนทุกแบบพร้อมแล้ว เราแค่หยิบมาประกอบ ถ้าต้องการ card มีพื้นหลังขาว มุมโค้ง มี shadow เราก็ใส่ class="bg-white rounded-lg shadow-md" ลงไปเลย ไม่ต้องออกแบบ "ชิ้นส่วน" ใหม่ เปรียบกับการสั่งพิซซ่า: Traditional CSS เหมือนทำแป้ง ซอส ท็อปปิ้งเองตั้งแต่ต้น ส่วน Tailwind เหมือนเลือกท็อปปิ้งจากรายการที่มีให้แล้ว ประกอบได้เร็วกว่ามาก และทุกชิ้นส่วนมีคุณภาพสม่ำเสมอ ตัวอย่างโปรเจกต์จริงที่ใช้ Tailwind: - Next.js + Tailwind เป็น stack ยอดนิยมที่สุดสำหรับ web apps - Tailwind UI เป็น component library ที่ต่อยอดจาก Tailwind - shadcn/ui ที่นิยมใน React ก็ใช้ Tailwind เป็นฐาน

แนวคิดหลักที่ต้องเข้าใจ

Tailwind ทำงานบนหลักการ 3 ข้อ: 1. Low-level utilities — แต่ละ class ทำสิ่งเดียว เช่น text-center ทำแค่ text-align: center 2. Composable — นำ class มาผสมกันได้อิสระตามต้องการ ไม่มี rule ผูกมัด 3. Design tokens — ค่าต่าง ๆ เช่น สี, ขนาด, spacing ถูกกำหนดเป็น scale ไว้ล่วงหน้า เช่น text-sm, text-base, text-lg, text-xl รูปแบบชื่อ class ใน Tailwind มักเป็น: [property]-[value] เช่น: - bg-blue-500 = background-color: blue ระดับ 500 - text-xl = font-size: ขนาด xl - p-4 = padding: 4 units (1rem) - rounded-lg = border-radius: large

การทำงานทีละขั้นตอน

• โหลด Tailwind ด้วยบรรทัดเดียว — ใส่ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> ใน HTML ก็พร้อมใช้ทันที (แบบนี้เหมาะสำหรับทดลองหรือ prototype)
• ดูว่า element ต้องการ style อะไรบ้าง — เช่น ต้องการ padding, สีพื้นหลัง, ตัวอักษรสีขาว, มุมโค้ง
• แปลง style แต่ละอย่างเป็น Tailwind class — เช่น padding: 1rem → p-4, background: blue → bg-blue-500, color: white → text-white
• ใส่ class ทุกตัวลงใน attribute class ของ HTML element — เช่น class="p-4 bg-blue-500 text-white rounded-lg"
• ดูผลลัพธ์และปรับค่าตาม scale ของ Tailwind — เช่น ถ้า p-4 มากเกิน ลองเปลี่ยนเป็น p-2 หรือ p-3

ตัวอย่างที่ 1 — ปุ่ม 3 แบบจาก Utility Classes

ปุ่มเป็น element ที่เห็นความแตกต่างได้ชัดมาก ตัวอย่างนี้แสดงปุ่ม 3 variant โดยเปลี่ยนแค่ utility classes ไม่ต้องเพิ่ม CSS ใหม่เลย

ตัวอย่างที่ 2 — Card Component ประกอบจาก Utility Classes

Card เป็น component ที่ต้องการ style หลายอย่างพร้อมกัน ตัวอย่างนี้แสดงวิธีประกอบ card โดยใช้เฉพาะ utility classes ไม่มี CSS ใหม่เลย

ตัวอย่างที่ 3 — Traditional CSS vs Tailwind

เปรียบเทียบโค้ดเดียวกันในสองแนวทาง เพื่อให้เห็นความแตกต่างอย่างชัดเจน ทั้งในแง่ของ HTML และ CSS ที่ต้องเขียน

จุดที่ผู้เริ่มต้นมักสับสน

• Class ยาวมากในบรรทัดเดียว — class="flex items-center gap-4 p-4 bg-white rounded-lg shadow-md border border-gray-200" ดูน่ากลัว แต่ในโปรเจกต์จริง editor จะช่วย format และ plugin ช่วย highlight สีตาม property ทำให้อ่านง่ายขึ้นมาก
• Tailwind ไม่ได้แทน CSS ทั้งหมด — ยังมีกรณีที่ต้องเขียน CSS เอง เช่น animation ซับซ้อน, pseudo-element, หรือ style เฉพาะที่ Tailwind ไม่มี class รองรับ
• ตัวเลขใน class ไม่ใช่ pixel — p-4 ไม่ได้แปลว่า 4px แต่หมายถึง 4 units ตาม scale ของ Tailwind ซึ่งโดยทั่วไป 1 unit = 0.25rem = 4px ดังนั้น p-4 = 1rem = 16px
• Browser CDN vs Production build — <script src="cdn"> เหมาะสำหรับทดลองและเรียนรู้ แต่ในโปรเจกต์จริงจะใช้ build process เพื่อตัด class ที่ไม่ใช้ออก ลด bundle size ให้เล็กที่สุด

เปรียบเทียบ Traditional CSS กับ Tailwind

สรุปท้ายบทแบบจำง่าย

Tailwind CSS = กล่องเลโก้ CSS — เราไม่ได้สร้างชิ้นส่วนใหม่ แค่หยิบมาประกอบ

• Utility-first = หนึ่ง class ทำหนึ่งหน้าที่ เช่น p-4, text-white, rounded-lg
• ประกอบ UI จากหลาย class แทนการเขียน CSS rule ใหม่
• ชื่อ class สื่อความหมายตรงตัว: [property]-[value] เช่น bg-blue-500, text-xl
• โหลดใช้งานได้ทันทีผ่าน CDN: <script src="cdn.jsdelivr.net/.../tailwindcss/browser@4">
• ข้อระวัง: class ยาวถ้าใช้ไม่เป็นระบบ, CDN เหมาะสำหรับทดลองเท่านั้น

Lab 1 — อ่านและใช้ Tailwind Utility Classes พื้นฐาน

playground นี้โหลด Tailwind ผ่าน CDN อยู่แล้ว ให้เพิ่ม Tailwind class ให้แต่ละ element ตาม comment ที่กำหนด

Lab 2 — ประกอบ Profile Card จาก Utility Classes

ให้สร้าง profile card โดยใช้เฉพาะ Tailwind utility classes ไม่ต้องเขียน CSS ใหม่เลย card ต้องมี: พื้นหลังขาว, มุมโค้ง, shadow, ชื่อตัวหนา, และปุ่ม "ติดตาม"

Lab 3 — แปลง Traditional CSS เป็น Tailwind

CSS ปัจจุบันใช้ class เฉพาะ .notice-box ให้แปลง HTML ให้ไม่ใช้ .notice-box อีกต่อไป แต่ใช้ Tailwind utility classes ที่ให้ผลลัพธ์เดียวกันแทน