Styling Track
CSS
Tailwind Essentials
Tailwind component patterns
ฝึกประกอบ card, nav และ action blocks ด้วย Tailwind utility classes อย่างอ่านง่าย ก่อนเข้าสู่ YouTube Workshop
คิดเป็น component ไม่ใช่แค่ class ยาว
เมื่อใช้ Tailwind กับ UI จริง class จะยาวขึ้น สิ่งที่ช่วยให้อ่านง่ายคือจัดคิดเป็น component: outer container, header, content, actions ให้เรียง class ตามหน้าที่ เช่น layout ก่อน spacing ต่อด้วยสี typography และ effects วิธีนี้ทำให้เราอ่าน card หรือ navbar ได้เร็วขึ้นตอนทำ workshop
- เริ่มจากโครง HTML ที่สื่อความหมายก่อน เช่น header, main, article
- ใส่ layout classes เช่น flex, grid, items-center
- ใส่ spacing และ sizing เช่น p-4, gap-3, max-w-*
- ใส่สี typography และ effects เช่น text-slate-900, bg-white, shadow-sm
- แยก state/responsive variants ไว้ท้าย ๆ เพื่ออ่านง่าย