CSS Tailwind cung cấp “ lề ” các lớp tiện ích cho phép người dùng kiểm soát khoảng cách xung quanh các phần tử. Các lề ngang thêm không gian vào bên trái và bên phải của một phần tử, trong khi một lề dọc thêm không gian vào đầu và cuối của một phần tử. Tailwind cung cấp nhiều lớp tiện ích khác nhau để thêm lề ngang hoặc dọc cho các phần tử mong muốn.
Bài viết này sẽ minh họa:
Cách thêm lề ngang trong Tailwind?
Để thêm lề ngang vào một phần tử trong Tailwind, hãy chọn “ mx-
cú pháp
< yếu tố lớp học = 'mx-
Ở đây, “mx” đại diện cho “trục x” hoặc “lề ngang”. Đảm bảo thay thế “
Ví dụ: Áp dụng lề ngang cho phần tử HTML
Trong ví dụ này, chúng tôi sẽ sử dụng “ mx-10 ” lớp tiện ích với “ Để thêm lề dọc vào một phần tử trong Tailwind, hãy sử dụng “ của tôi- cú pháp Ví dụ: Áp dụng lề dọc cho phần tử HTML Trong ví dụ này, chúng tôi sẽ sử dụng “ my-10 ” lớp tiện ích với “ Để thêm lề ngang và dọc trong Tailwind, hãy chọn “ mx-
< thân hình >
< div lớp học = 'h-màn hình mx-10 bg-tím-500' >
< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >
div >
thân hình >
đầu ra 
Đầu ra ở trên hiển thị lề ở bên trái và bên phải của vùng chứa. Điều này cho biết rằng lề ngang đã được áp dụng thành công cho phần tử vùng chứa. Cách thêm lề dọc trong Tailwind?
Ở đây, “của tôi” đại diện cho “trục y” hoặc “lề dọc”. Đảm bảo thay thế “
< div lớp học = 'h-96 my-10 bg-purple-500' >
< P lớp học = 'trung tâm văn bản text-5xl' > Lề TRONG CSS đuôi gió P >
div >
thân hình >
đầu ra 
Đầu ra ở trên hiển thị lề cho các mặt trên và dưới của vùng chứa. Điều này chỉ ra rằng lề dọc đã được áp dụng hiệu quả cho phần tử vùng chứa. Phần kết luận