Trong Tailwind CSS, phần đệm được dùng để thêm khoảng cách giữa nội dung của thành phần cụ thể và đường viền của thành phần đó. Nó thêm khoảng cách bổ sung bên trong phần tử. Tailwind CSS cung cấp một tập hợp các tiện ích đệm và giá trị đệm cho phép người dùng tùy chỉnh khoảng cách của các thành phần mong muốn. Hơn nữa, người dùng có thể thêm phần đệm vào một bên, chẳng hạn như trên cùng, dưới cùng, bên trái hoặc bên phải của một phần tử cụ thể.
Blog này sẽ minh họa các ví dụ để thêm phần đệm vào một mặt của phần tử trong Tailwind CSS.
Cách thêm phần đệm vào một mặt trong Tailwind?
Để thêm phần đệm vào một mặt của phần tử trong Tailwind, bạn có thể sử dụng các lớp tiện ích sau:
Để hiểu rõ hơn, hãy xem các ví dụ được cung cấp bên dưới.
Ví dụ 1: Thêm phần đệm vào đầu phần tử
Trong ví dụ này, chúng tôi sẽ sử dụng “ pt-10 ” lớp tiện ích trong “ Ví dụ 2: Thêm phần đệm vào dưới cùng của phần tử Trong ví dụ này, chúng tôi sẽ sử dụng “ pb-10 ” lớp học trong “ Ví dụ 3: Thêm phần đệm vào bên phải phần tử Trong ví dụ này, chúng tôi sẽ sử dụng “ pr-10 ” lớp học trong “ Ví dụ 4: Thêm phần đệm vào bên trái của phần tử Trong ví dụ này, chúng tôi sẽ sử dụng “ pl-10 ” lớp học trong “ Để thêm phần đệm vào một mặt của phần tử trong Tailwind, bạn có thể sử dụng nhiều lớp tiện ích khác nhau, chẳng hạn như “ pl-
< div lớp học = 'bg-hồng-600 pt-10 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 đã được thêm vào đầu vùng chứa.
< div lớp học = 'bg-hồng-600 pb-10 w-max' >
đệm TRONG CSS đuôi gió
div >
thân hình >
đầu ra 
Có thể thấy rằng phần đệm đã được thêm vào đáy của vùng chứa.
< div lớp học = 'bg-pink-600 pr-10 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 đã được thêm vào bên phải của phần tử vùng chứa.
< div lớp học = 'bg-hồng-600 pl-10 w-max' >
đệm TRONG CSS đuôi gió
div >
thân hình >
đầu ra 
Có thể quan sát thấy rằng phần đệm đã được thêm vào bên trái của vùng chứa. Phần kết luận