Mission 7: สีและ Spacing ด้วย Tailwind

เป้าหมายของ Mission นี้: ใช้ utility class หลายตัวรวมกัน ครอบคลุมสี พื้นหลัง และระยะห่าง

รวม utility หลายตัว

จุดแข็งของ Tailwind คือใส่หลาย class รวมกันในที่เดียวได้เลย — เทียบกับ Chapter 3 ที่ต้องเขียนหลาย property ในกฎ CSS เดียว วิธีคิดเหมือนกันทุกอย่าง แค่เปลี่ยนจากเขียน CSS เป็นต่อ class

เทียบ CSS กับ Tailwind (ทวนจาก Chapter 3)

Demo

<div class="bg-slate-50 p-6 rounded-xl">
  สวัสดี!
</div>