Styling Track
CSS
Tailwind Essentials
Tailwind layers & custom CSS
เรียนรู้ cascade layers ใน Tailwind v4, การเพิ่ม base/component/custom utility แบบพอดี และข้อจำกัดของ browser CDN สำหรับงาน production
Tailwind v4 ใช้ cascade layers
Tailwind v4 จัด CSS เป็น layer หลัก เช่น theme, base, components และ utilities เพื่อให้ลำดับการชนะของ style คาดเดาได้มากขึ้น ในบทเรียนนี้เราใช้ browser CDN เพื่อทดลอง แต่ในโปรเจกต์จริงควรใช้ build setup เพราะ CDN เหมาะกับการเรียนรู้และ prototype ไม่ใช่ production ให้จำแบบสั้น ๆ: theme ใช้ประกาศ token, base ใช้ตั้งค่า element พื้นฐาน, components ใช้สร้าง class ที่เป็นชิ้น UI, utilities ใช้สร้าง utility เฉพาะงาน
| Layer | ใช้เมื่อ | ตัวอย่าง |
|---|---|---|
| theme | ต้องการ token ใหม่ให้ Tailwind สร้าง class ให้ | @theme { --color-course-600: ... } |
| base | ต้องการ default style ให้ element เช่น body, h1, a | @layer base { body { ... } } |
| components | ต้องการ class ระดับชิ้น UI ที่ใช้ซ้ำ | @layer components { .btn-primary { ... } } |
| utilities | ต้องการ utility class เฉพาะงานที่ Tailwind ไม่มีให้ | @layer utilities { .content-auto { ... } } |