Mission 8: Layout ด้วย Tailwind

เป้าหมายของ Mission นี้: จัด Layout ด้วย Tailwind class แทน CSS property

ทวนจาก Chapter 4

display: flex และ gap ที่เขียนเป็น CSS ทั้ง Chapter 4 มี Tailwind class ตรงตัว: flex และ gap-4

Demo

<div class="flex gap-4">
  <div class="bg-slate-50 p-6 rounded-xl">การ์ด 1</div>
  <div class="bg-slate-50 p-6 rounded-xl">การ์ด 2</div>
  <div class="bg-slate-50 p-6 rounded-xl">การ์ด 3</div>
</div>

สังเกตว่านี่คือความรู้จาก Chapter 3 (สี/spacing) + Chapter 4 (layout) มารวมกัน ทั้งหมด แค่เขียนเป็น utility class แทนการเขียน CSS เอง