Tailwind CSS ให้ “ ชัดเจน ” ยูทิลิตี้ที่ควบคุมพฤติกรรมขององค์ประกอบเฉพาะเมื่ออยู่ถัดจากองค์ประกอบลอยตัว ตัวอย่างเช่น คลาสยูทิลิตี้ 'clear-left' และ 'clear-right' ช่วยให้นักพัฒนาสามารถย้ายองค์ประกอบที่ระบุด้านล่างองค์ประกอบลอยซ้ายหรือลอยขวาในคอนเทนเนอร์ อย่างไรก็ตาม ในบางครั้ง ผู้ใช้ต้องการปิดใช้งานการล้างที่ใช้กับองค์ประกอบบางอย่าง และอนุญาตให้ปรากฏถัดจากองค์ประกอบแบบลอย ในสถานการณ์ดังกล่าว สามารถใช้ยูทิลิตี 'clear-none' เพื่อกำหนดค่าเริ่มต้นขององค์ประกอบได้
บทความนี้จะยกตัวอย่างขั้นตอนการปิดใช้การล้างที่ใช้ทั้งหมดใน Tailwind CSS
จะปิดใช้งานการล้างที่ใช้ทั้งหมดใน Tailwind ได้อย่างไร
หากต้องการปิดใช้การล้างที่ใช้ทั้งหมดใน Tailwind ให้สร้างไฟล์ HTML และเพิ่ม ' ชัดเจนไม่มี ” คลาสยูทิลิตี้พร้อมองค์ประกอบที่ต้องการในโปรแกรม HTML ยูทิลิตีนี้จะรีเซ็ต 'ล้าง' ใดๆ ที่ใช้กับองค์ประกอบเฉพาะและกำหนดค่าเริ่มต้น
ไวยากรณ์
< องค์ประกอบ ระดับ = 'ชัดเจน-ไม่มี' > ... องค์ประกอบ >
ตัวอย่าง
ในตัวอย่างนี้ เราจะใช้ “ ชัดเจนไม่มี ” ยูทิลิตี้กับ “ ” องค์ประกอบเพื่อรีเซ็ตการล้างที่ใช้แล้วและปล่อยให้ลอยทางด้านซ้ายและด้านขวา:
< ร่างกาย >
< แผนก ระดับ = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' ระดับ = 'ลอยซ้าย p-3 w-28 h-24' ทุกอย่าง = 'ภาพ' />
< img src = 'tailwindcss_img.png' ระดับ = 'โฟลตขวา p-3' ทุกอย่าง = 'ภาพ' />
< หน้า ระดับ = 'ชัดเจน-ไม่มี' > Tailwind CSS ให้ 'ชัดเจน' ยูทิลิตี้เพื่อควบคุมการห่อเนื้อหารอบองค์ประกอบ
ตัวอย่างนี้จะแสดงวิธีปิดใช้งานการล้างองค์ประกอบทั้งหมด หากต้องการรีเซ็ตการล้างที่ใช้กับองค์ประกอบใดองค์ประกอบหนึ่ง 'ชัดเจน-ไม่มี' ยูทิลิตี้ถูกนำมาใช้ หน้า >
แผนก >
ร่างกาย >
ที่นี่:
- “ ลอยซ้าย ” class ลอยองค์ประกอบ
ไปทางด้านซ้ายของคอนเทนเนอร์
- “ ขวาลอย ” class ลอยองค์ประกอบ
ไปทางด้านขวาของคอนเทนเนอร์
- “ ชัดเจนไม่มี ” คลาสปิดใช้งานการล้างที่ใช้กับองค์ประกอบ
และอนุญาตให้องค์ประกอบลอยทั้งสองด้าน
เอาต์พุต
ในหน้าเว็บข้างต้น สังเกตได้ว่าเนื้อหาลอยอยู่ทั้งสองด้านของคอนเทนเนอร์ สิ่งนี้บ่งชี้ว่าการล้างที่ใช้ทั้งหมดถูกปิดใช้งานจากองค์ประกอบที่ระบุ
บทสรุป
หากต้องการปิดใช้การล้างที่ใช้ทั้งหมดใน Tailwind ให้ใช้ ' ชัดเจนไม่มี ” คลาสยูทิลิตี้พร้อมองค์ประกอบที่ต้องการในโปรแกรม HTML ยูทิลิตีนี้จะรีเซ็ตการล้างที่ใช้กับองค์ประกอบเฉพาะและระบุค่าเริ่มต้น สำหรับการยืนยัน ให้ไปที่หน้าเว็บและดูการเปลี่ยนแปลง บทความนี้แสดงตัวอย่างการปิดใช้การล้างที่ใช้ทั้งหมดใน Tailwind CSS