Trong CSS Tailwind, đệm là khoảng cách giữa nội dung của phần tử cụ thể và đường viền của nó. đệm ngang là khoảng trống ở bên trái và bên phải của phần tử, trong khi đó đệm dọc là không gian trên đầu và dưới cùng của một phần tử. Tailwind cung cấp nhiều lớp tiện ích khác nhau để thêm phần đệm ngang hoặc dọc vào các phần tử mong muốn.
Bài viết này sẽ minh họa:
Cách thêm Đệm ngang trong Tailwind?
Để thêm phần đệm ngang vào một phần tử trong Tailwind, lớp “px-
cú pháp
< yếu tố lớp học = 'px-0...' > ... yếu tố >
Ở đây “px” đại diện cho “trục x” hoặc “phần đệm ngang”.
Ví dụ: Áp dụng Đệm ngang cho Phần tử HTML
Trong ví dụ này, chúng tôi sẽ sử dụng “ px-20 ” lớp tiện ích với “ Để thêm phần đệm dọc vào một thành phần trong Tailwind, hãy sử dụng “ py- cú pháp Ví dụ: Áp dụng Đệm dọc cho Phần tử HTML Trong ví dụ này, chúng tôi sẽ sử dụng “ py-20 ” lớp tiện ích với “ Để thêm phần đệm ngang và dọc trong Tailwind, hãy chọn “ px-
< thân hình >
< div lớp học = 'bg-hồng-600 px-20 w-max' >
đệm TRONG CSS đuôi gió
div >
thân hình >
đầu ra 
Đầu ra ở trên hiển thị phần đệm ở bên trái và bên phải của vùng chứa. Điều này cho biết rằng phần đệm ngang đã được áp dụng thành công cho phần tử vùng chứa. Cách thêm đệm dọc trong Tailwind?
Ở đây “py” đại diện cho “trục y” hoặc “phần đệm dọc”.
< div lớp học = 'bg-pink-600 py-20 w-max' >
đệm TRONG CSS đuôi gió
div >
thân hình >
đầu ra 
Đầu ra ở trên cho thấy phần đệm ở mặt trên và mặt dưới của vùng chứa. Điều này chỉ ra rằng phần đệm dọc đã được áp dụng hiệu quả cho phần tử vùng chứa. Phần kết luận