Tailwind CSS ให้ “ ขอบ ” คลาสยูทิลิตี้ที่ช่วยให้ผู้ใช้สามารถควบคุมระยะห่างรอบ ๆ องค์ประกอบ เดอะ ขอบแนวนอน เพิ่มช่องว่างทางด้านซ้ายและด้านขวาขององค์ประกอบ ในขณะที่ก ขอบแนวตั้ง เพิ่มช่องว่างที่ด้านบนและด้านล่างขององค์ประกอบ Tailwind มียูทิลิตี้หลายประเภทเพื่อเพิ่มระยะขอบแนวนอนหรือแนวตั้งให้กับองค์ประกอบที่ต้องการ
บทความนี้จะยกตัวอย่าง:
จะเพิ่มระยะขอบแนวนอนใน Tailwind ได้อย่างไร
หากต้องการเพิ่มระยะขอบแนวนอนให้กับองค์ประกอบใน Tailwind ให้ใช้ปุ่ม ' mx-<ค่า> ” คลาสใช้กับองค์ประกอบที่ต้องการในโปรแกรม HTML ผู้ใช้สามารถระบุค่าต่าง ๆ สำหรับขนาดของระยะขอบ ชั้นนี้เพิ่มระยะขอบตามแกน x (ด้านขวาและด้านซ้าย)
ไวยากรณ์
< องค์ประกอบ ระดับ = 'mx-
ในที่นี้ 'mx' หมายถึง 'แกน x' หรือ 'ระยะขอบแนวนอน' อย่าลืมแทนที่ “
ตัวอย่าง: การใช้ระยะขอบแนวนอนกับองค์ประกอบ HTML
ในตัวอย่างนี้ เราจะใช้ “ เอ็มเอ็กซ์-10 ” คลาสยูทิลิตี้ด้วย “ หากต้องการเพิ่มระยะขอบแนวตั้งให้กับองค์ประกอบใน Tailwind ให้ใช้ปุ่ม “ my- ไวยากรณ์ ตัวอย่าง: การใช้ระยะขอบแนวตั้งกับองค์ประกอบ HTML ในตัวอย่างนี้ เราจะใช้ “ มาย-10 ” คลาสยูทิลิตี้ด้วย “ หากต้องการเพิ่มระยะขอบแนวนอนและแนวตั้งใน Tailwind ให้ใช้ปุ่ม ' mx-<ค่า> ' และ ' my-
< ร่างกาย >
< แผนก ระดับ = 'h-จอmx-10 bg-ม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
เอาต์พุต 
เอาต์พุตด้านบนแสดงระยะขอบด้านซ้ายและขวาของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้ระยะขอบแนวนอนกับองค์ประกอบคอนเทนเนอร์สำเร็จแล้ว จะเพิ่มระยะขอบแนวตั้งใน Tailwind ได้อย่างไร
ในที่นี้ “my” หมายถึง “แกน y” หรือ “ระยะขอบแนวตั้ง” อย่าลืมแทนที่ “
< แผนก ระดับ = 'h-96 my-10 bg-ม่วง-500' >
< หน้า ระดับ = 'ศูนย์ข้อความ text-5xl' > ระยะขอบ ใน CSS ของ Tailwind หน้า >
แผนก >
ร่างกาย >
เอาต์พุต 
เอาต์พุตด้านบนแสดงระยะขอบที่ด้านบนและด้านล่างของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่ามีการใช้ขอบแนวตั้งกับองค์ประกอบคอนเทนเนอร์อย่างมีประสิทธิภาพ บทสรุป