Mission 5: ทบทวน Tailwind CSS เบื้องต้น

เป้าหมายของ Mission นี้: ทบทวน Tailwind CSS เบื้องต้น ก่อนใช้จริงใน Workshop

Tailwind CSS เบื้องต้น

ใส่ utility class ที่ตัว element ตรงๆ ไม่ต้องเขียนไฟล์ CSS แยก

flowchart LR
    C1["flex"] --> V1["จัดเรียงแนวนอน"]
    C2["items-center"] --> V2["กึ่งกลางแนวตั้ง"]
    C3["justify-between"] --> V3["กระจายห่างสุด"]
    C4["gap-4"] --> V4["เว้นระยะห่างระหว่างลูก"]

<div className="flex items-center justify-between bg-slate-50 p-4">
  <span className="font-bold">โลโก้</span>
</div>

ตัวช่วยจำที่ใช้บ่อยที่สุด

พร้อมแล้ว! ไปลงมือ Workshop สร้างเว็บกันเลย