Tailwind CSS là một khung nổi tiếng được sử dụng để tạo các trang web hoặc thiết kế có thể tùy chỉnh và đáp ứng. Nó cũng cho phép người dùng kiểm soát bố cục và khoảng cách của các thành phần mà không cần viết bất kỳ CSS tùy chỉnh nào. Đệ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ó. Đôi khi, người dùng muốn áp dụng cùng một lượng đệm cho mọi mặt của phần tử. Tailwind cung cấp các lớp tiện ích để áp dụng phần đệm cho tất cả các mặt của phần tử hoặc cho các mặt cụ thể, chẳng hạn như trên, phải, dưới hoặc trái.
Bài viết này sẽ minh họa phương pháp thêm phần đệm vào tất cả các mặt của phần tử trong Tailwind.
Cách thêm phần đệm vào tất cả các mặt trong Tailwind?
Để thêm phần đệm vào tất cả các mặt của một phần tử cụ thể trong Tailwind, hãy tạo một cấu trúc HTML. Sau đó, sử dụng lớp tiện ích “p-
cú pháp
< yếu tố lớp học = 'p-
Thay thế “
Ví dụ
Trong ví dụ này, chúng tôi có hai ' Trong đầu ra Để thêm phần đệm vào tất cả các mặt của phần tử trong Tailwind, lớp tiện ích “p-
< thân hình >
< div lớp học = 'bg-hồng-600 p-8 w-max' >
đệm TRONG CSS đuôi gió
div >
< anh >
< div lớp học = 'bg-teal-600 p-14 w-max' >
đệm TRONG CSS đuôi gió
div >
thân hình >
Ở đây, trong
Theo đầu ra ở trên, phần đệm được chỉ định đã được áp dụng cho tất cả các mặt của cả hai vùng chứa. Phần kết luận