โพสต์นี้จะอธิบายรายละเอียดเกี่ยวกับขั้นตอนทั้งหมดเพื่อเพิ่มช่องว่างระหว่างคอลัมน์ใน Tailwind
จะเพิ่มช่องว่างระหว่างคอลัมน์ใน Tailwind ได้อย่างไร
หากต้องการเพิ่มช่องว่างระหว่างคอลัมน์ใน Tailwind ให้ใช้ ' ช่องว่าง-{ขนาด} ' คุณประโยชน์. โดยจะระบุค่าจำนวนเต็มที่แสดงถึงช่องว่างระหว่างคอลัมน์ในแนวนอนและแนวตั้ง มาทำงานนี้จริงด้วยความช่วยเหลือของตัวอย่างที่ระบุไว้
โครงสร้างไฟล์โครงการ
“ ช่องว่าง-{ขนาด} ” สามารถใช้ยูทิลิตีในโครงการ Tailwind ใดๆ ที่เป็นไปตามโครงสร้างไฟล์ที่กำหนด:
เริ่มจากตัวอย่างแรกกันก่อน
ตัวอย่างที่ 1: ใช้ยูทิลิตี้ “gap-{size}” เพื่อเพิ่มช่องว่างที่เหมือนกันระหว่างแถวและคอลัมน์
ตัวอย่างนี้ใช้ยูทิลิตี 'gap-{size}' เพื่อเพิ่มช่องว่างเดียวกันในแนวนอนและแนวตั้งระหว่างคอลัมน์ที่กำหนด
รหัส HTML
ภาพรวมของรหัสต่อไปนี้:
< ศีรษะ >
< ลิงค์ href = '/dist/output.css' ญาติ = 'สไตล์ชีต' >
< / ศีรษะ >
< ร่างกาย >
< h1 ระดับ = 'text-3xl font-bold text-center ขีดเส้นใต้ text-orange-600' > ยินดีต้อนรับสู่ Linuxint! < / h1 >< br >
< แผนก ระดับ = 'mx-2 กริด กริด-คอล-3 ช่องว่าง-4' >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนแรก < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่สอง < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่สาม < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่สี่ < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่ห้า < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่หก < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่เจ็ด < / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' > บทช่วยสอนที่แปด < / แผนก >
< / แผนก >
<ร่างกาย<
ในบรรทัดรหัสด้านบน:
- ขั้นแรก เชื่อมโยงไฟล์ CSS หลัก “ /dist/output.css ” ด้วยไฟล์ HTML ที่มีอยู่ “ index.html ' ใช้ ' <ลิงค์> ” แท็กในส่วน “หัว”
- ถัดไป ส่วน 'body' จะสร้างองค์ประกอบ '
' ที่ใช้ ' ขนาดตัวอักษร ”, “ น้ำหนักตัวอักษร ”, “ จัดข้อความ ”, “ การตกแต่งข้อความ ', และ ' สีข้อความ คลาส Tailwind ตามลำดับ
- หลังจากนั้น จะมีการเพิ่มองค์ประกอบ “” ที่ใช้ “ กริด ” ยูทิลิตี้เพื่อตั้งค่าเนื้อหาในรูปแบบกริดตามจำนวนที่ระบุ “ ขอบ ” คลาสเพื่อตั้งค่าระยะขอบแนวนอน และปุ่ม “ ช่องว่าง ” ยูทิลิตี้เพื่อเพิ่มช่องว่างที่ระบุระหว่างคอลัมน์
- ในส่วนเนื้อหาขององค์ประกอบ “
” มีองค์ประกอบ “” อีกแปดองค์ประกอบที่ใช้ “ ความกว้างของเส้นขอบ ' และ ' สีขอบ ” ชั้นเรียนตามลำดับเอาต์พุต
รันโค้ด HTML ข้างต้นในเซิร์ฟเวอร์จริงและวิเคราะห์ผลลัพธ์:
ดังที่เห็น เอาต์พุตจะเพิ่มช่องว่างที่ระบุระหว่างคอลัมน์ในทั้งสองมิติอย่างเหมาะสม
ตัวอย่างที่ 2: ใช้ยูทิลิตี้ “gap-{size}” เพื่อเพิ่มช่องว่างระหว่างแถวและคอลัมน์อย่างอิสระ
“ ช่องว่าง-{ขนาด} ยูทิลิตี้นี้สามารถนำไปใช้กับมิติข้อมูล 'x (แนวนอน)' และ 'y (แนวตั้ง)' เป็น 'gap-x-{size}' สำหรับแถว และ 'gap-y-{size}' สำหรับคอลัมน์เพื่อเพิ่ม ช่องว่างระหว่างพวกเขาเป็นรายบุคคลมาดูการใช้งานจริงกัน
รหัส HTML
< ศีรษะ >
ดูรหัสที่กำหนด:
< ลิงค์ href = '/dist/output.css' ญาติ = 'สไตล์ชีต' >
< / ศีรษะ >
< ร่างกาย >
< แผนก ระดับ = 'mx-2 กริด กริด-คอล-4 ช่องว่าง-x-4 ช่องว่าง-y-6' >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >การสอนครั้งแรก< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่สอง< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่สาม< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่สี่< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่ห้า< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่หก< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทเรียนที่เจ็ด< / แผนก >
< แผนก ระดับ = 'เส้นขอบ-2 ขอบ-สีส้ม-600' >บทช่วยสอนที่แปด< / แผนก >
< / แผนก >
< ร่างกาย >ที่นี่ “ ช่องว่าง-x-{ขนาด} ” ยูทิลิตี้เพิ่มช่องว่างระหว่างแถวและ “ ช่องว่าง-y-{ขนาด} ” เพิ่มช่องว่างที่ระบุระหว่างคอลัมน์อย่างอิสระ
เอาต์พุต
ผลลัพธ์ข้างต้นช่วยยืนยันว่ามีการใช้ช่องว่างระหว่างแถวและคอลัมน์ตามนั้น
บทสรุป
“Tailwind CSS” มีในตัว “ ช่องว่าง-{ขนาด} ” ยูทิลิตี้เพื่อเพิ่มช่องว่างระหว่างคอลัมน์ นอกจากนี้ยังสามารถใช้เพื่อเพิ่มช่องว่างระหว่างแถวและคอลัมน์แยกกันผ่านปุ่ม ' ช่องว่าง-x-{ขนาด} ' และ ' ช่องว่าง-y-{ขนาด} ” สาธารณูปโภค. โพสต์นี้ให้ขั้นตอนที่สมบูรณ์ในการเพิ่มช่องว่างระหว่างคอลัมน์ใน Tailwind
- ในส่วนเนื้อหาขององค์ประกอบ “