Tailwind Essentials

จัดลำดับข้อความด้วย utility classes

Typography คือวิธีทำให้ข้อความอ่านง่ายและรู้ว่าอะไรสำคัญก่อนหลัง ใน Tailwind ใช้ class เช่น text-sm, text-2xl, font-semibold, leading-7 และ tracking-wide ให้คิดจากหน้าที่ของข้อความก่อน เช่น heading ต้องเด่นกว่า body, label ต้องเล็กกว่า, และคำอธิบายควรใช้สีอ่อนลง

ใช้สีอย่างมีความหมาย

สีใน Tailwind มักเขียนเป็นหมวดและระดับ เช่น bg-sky-600, text-slate-500, border-emerald-200 ระดับตัวเลขยิ่งมากมักยิ่งเข้ม กฎง่าย ๆ คือพื้นหลังอ่อนใช้ข้อความเข้ม พื้นหลังเข้มใช้ข้อความขาว และสีสถานะควรสัมพันธ์กับความหมาย เช่น emerald สำหรับสำเร็จ, amber สำหรับเตือน, rose สำหรับอันตราย