Tailwind Workshop

Workshop 1: Header

เริ่มจาก header ก่อน เพราะเป็น layout ที่เห็นภาพเร็วและใช้ utility หลักหลายตัวพร้อมกัน เช่น flex, justify-between, gap และ spacing รอบกล่อง เป้าหมายคืออ่านโครงซ้าย กลาง ขวาให้ออกก่อนว่าต้องจัดกลุ่มอย่างไร

Workshop 2: Card

ต่อด้วย card เพื่อฝึกมอง class เป็นกลุ่มตามหน้าที่: thumbnail, content, meta และ action จุดสำคัญของขั้นนี้คือการใช้ aspect ratio, spacing ภายใน card และการจัดลำดับข้อความให้อ่านง่าย

Workshop 3: Sidebar

Sidebar ยากขึ้นอีกนิด เพราะต้องคิดทั้งโครงแนวตั้ง active state และ hover state พร้อมกัน ให้สังเกตว่าเราไม่ได้ใช้เทคนิคใหม่เกินจากบทก่อนหน้า แค่เอา flex-col, gap, rounded และสีสถานะมาประกอบให้เป็นระบบ

Workshop 4: Footer

ปิดท้ายด้วย footer แบบ responsive เพื่อทบทวนการจัดกลุ่มข้อมูลหลายชุดในพื้นที่กว้างขึ้น บนจอเล็กจะเรียงเป็นคอลัมน์ก่อน แล้วค่อยขยับเป็นแถวเมื่อถึง `md:` จุดนี้ช่วยเชื่อมเรื่อง spacing, typography และ responsive variants เข้าด้วยกัน