CSS Tailwind cung cấp “ thông thoáng ” tiện ích kiểm soát hành vi của một phần tử cụ thể khi nó ở bên cạnh bất kỳ phần tử nổi nào. Chẳng hạn, các lớp tiện ích “xóa trái” và “xóa phải” cho phép các nhà phát triển làm cho các phần tử được chỉ định di chuyển bên dưới bất kỳ phần tử thả nổi trái hoặc thả nổi phải nào trong vùng chứa. Tuy nhiên, đôi khi, người dùng muốn tắt bất kỳ tính năng rõ ràng nào được áp dụng cho một số phần tử nhất định và cho phép chúng xuất hiện bên cạnh các phần tử nổi. Trong những trường hợp như vậy, tiện ích 'không xóa' có thể được sử dụng để xác định giá trị mặc định của phần tử.
Bài viết này sẽ minh họa quy trình tắt tất cả các xóa đã áp dụng trong Tailwind CSS.
Làm cách nào để vô hiệu hóa tất cả các lần xóa đã áp dụng trong Tailwind?
Để tắt tất cả xóa đã áp dụng trong Tailwind, hãy tạo một tệp HTML và thêm phần “ rõ ràng-không có ” lớp tiện ích với phần tử mong muốn trong chương trình HTML. Tiện ích này đặt lại bất kỳ 'xóa' nào được áp dụng cho một phần tử cụ thể và xác định giá trị mặc định.
cú pháp
< yếu tố lớp học = 'rõ ràng-không có' > ... yếu tố >
Ví dụ
Trong ví dụ này, chúng tôi sẽ sử dụng “ rõ ràng-không có ” tiện ích với “ ” phần tử để đặt lại xóa được áp dụng và cho phép nó nổi ở bên trái và bên phải:
< thân hình >
< div lớp học = 'h-96 mx-10 p-8 bg-sky-500' >
< hình ảnh src = 'tailwindcss_img.png' lớp học = 'float-left p-3 w-28 h-24' mọi thứ = 'hình ảnh' />
< hình ảnh src = 'tailwindcss_img.png' lớp học = 'phao-phải p-3' mọi thứ = 'hình ảnh' />
< P lớp học = 'rõ ràng-không có' > CSS Tailwind cung cấp 'thông thoáng' các tiện ích để kiểm soát gói nội dung xung quanh một phần tử.
Ví dụ này sẽ chỉ ra cách vô hiệu hóa tất cả các xóa được áp dụng cho các phần tử. Để đặt lại mọi xóa đã áp dụng cho một phần tử cụ thể, 'rõ ràng-không có' tiện ích được sử dụng. P >
div >
thân hình >
Đây:
- “ float-left ” lớp thả phần tử
ở phía bên trái của vùng chứa.
- “ thả nổi bên phải ” lớp thả phần tử
vào phía bên phải của vùng chứa.
- “ rõ ràng-không có ” lớp vô hiệu hóa bất kỳ chức năng xóa nào được áp dụng cho phần tử
và cho phép phần tử nổi ở cả hai bên.
đầu ra
Trong trang web trên, có thể thấy rằng nội dung nổi trên cả hai mặt của vùng chứa. Điều này chỉ ra rằng tất cả các xóa được áp dụng đã bị vô hiệu hóa khỏi thành phần được chỉ định.
Phần kết luận
Để tắt tất cả các xóa đã áp dụng trong Tailwind, hãy sử dụng “ rõ ràng-không có ” lớp tiện ích với phần tử mong muốn trong chương trình HTML. Tiện ích này đặt lại bất kỳ lệnh xóa nào được áp dụng cho một phần tử cụ thể và chỉ định giá trị mặc định. Để xác minh, hãy điều hướng đến trang web và xem các thay đổi. Bài viết này đã trình bày ví dụ về cách vô hiệu hóa tất cả các xóa đã áp dụng trong Tailwind CSS.