บล็อกนี้อธิบายแนวคิดหลักต่อไปนี้อย่างละเอียด:
- วิธีใช้/ใช้ประโยชน์จากเบรกพอยต์และการสืบค้นสื่อด้วยคลิปพื้นหลังใน Tailwind
- การใช้เบรกพอยต์กับคลิปพื้นหลังใน Tailwind
- การใช้การสืบค้นสื่อกับคลิปพื้นหลังใน Tailwind
วิธีใช้/ใช้ประโยชน์จากเบรกพอยต์และการสืบค้นสื่อด้วยคลิปพื้นหลังใน Tailwind
“ bg-คลิป-{คำหลัก} ยูทิลิตี้ ” ใช้เพื่อตั้งค่ากรอบขอบของพื้นหลังขององค์ประกอบ ยูทิลิตี้นี้สามารถใช้ได้กับหลายคุณสมบัติ เช่น “ ช่องว่างภายใน , ' เส้นขอบกล่อง , ' เนื้อหากล่อง ', และ ' กล่องข้อความ '.
ตัวอย่างที่ 1: การใช้เบรกพอยต์กับคลิปพื้นหลังใน Tailwind
ตัวอย่างนี้ใช้เบรกพอยท์กับคลิปพื้นหลังโดยใช้ ' bg-คลิป-{คำหลัก} ” ยูทิลิตี้ด้วย “ แพทยศาสตร์ ” กล่าวคือ หน้าจอขนาดกลาง และ “ แอลจี ” เช่น คลาสหน้าจอขนาดใหญ่:
< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< สคริปต์ src = 'https://cdn.tailwindcss.com' >< / สคริปต์ >
< / ศีรษะ >
< ร่างกาย >
< พื้นที่ข้อความ ระดับ = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > นี่คือ CSS ของ Tailwind < / พื้นที่ข้อความ >
< / ร่างกาย >
< / html >
ตามบรรทัดรหัสเหล่านี้:
- ขั้นแรก ให้ระบุเส้นทาง CDN เพื่อใช้ฟังก์ชัน Tailwind
- จากนั้นสร้างองค์ประกอบ “