Styling Track
CSS
Tailwind Essentials
Tailwind spacing & sizing
เรียนรู้ class กลุ่ม spacing และ sizing ของ Tailwind v4 เช่น p-4, gap-4, w-full, max-w-md เพื่อควบคุมระยะและขนาดก่อนประกอบ layout จริง
spacing ใน Tailwind อ่านอย่างไร
spacing คือระยะว่าง เช่น padding, margin และ gap ใน Tailwind เราใช้ class สั้น ๆ เช่น p-4, px-6, mt-3, gap-4 แทนการเขียน CSS เองทุกครั้ง เลขใน class ไม่ใช่ px ตรง ๆ แต่เป็น scale ของ Tailwind โดยค่าเริ่มต้น 1 หน่วยมักเท่ากับ 0.25rem ดังนั้น p-4 คือ padding 1rem
| Class | ความหมาย | ใช้เมื่อ |
|---|---|---|
| p-4 | padding ทุกด้าน | เพิ่มพื้นที่ด้านในกล่อง |
| px-6 | padding ซ้าย/ขวา | ทำปุ่มหรือ container ให้หายแน่น |
| mt-4 | margin-top | เว้นระยะจาก element ก่อนหน้า |
| gap-3 | ช่องว่างระหว่าง flex/grid children | จัดระยะรายการหลายชิ้น |
sizing และ layout constraints
sizing class ใช้ควบคุมขนาด เช่น w-full, h-12, max-w-md และ min-h-screen แนวคิดสำคัญคืออย่าให้ทุกอย่างกว้างเต็มจอเสมอไป ในงานจริงมักใช้ w-full ให้ element ยืดตามพื้นที่ และใช้ max-w-* เพื่อจำกัดความกว้างไม่ให้เนื้อหาอ่านยากบนจอใหญ่