บทความนี้จะอธิบายวิธีการใช้ยูทิลิตี้แบบคงที่ใน Tailwind CSS
จะใช้ยูทิลิตี้แบบคงที่ใน Tailwind ได้อย่างไร
หากต้องการใช้ยูทิลิตี้แบบคงที่ใน Tailwind ให้เพิ่ม ' addUtilities() ” ในไฟล์ “tailwind.config.js” และกำหนดค่ายูทิลิตี้คงที่ที่ต้องการ จากนั้น ใช้ยูทิลิตี้แบบคงที่ในโปรแกรม HTML และตรวจสอบให้แน่ใจว่ายูทิลิตี้แบบคงที่ทำงานอย่างถูกต้องเมื่อดูหน้าเว็บ HTML
ให้เราสำรวจขั้นตอนต่อไปนี้:
ขั้นตอนที่ 1: กำหนดค่า Static Utilities ในไฟล์ “tailwind.config.js”
เปิด ' tailwind.config.js ” และเพิ่มไฟล์ “ ปลั๊กอิน ' ส่วน. จากนั้นใช้ปุ่ม “ addUtilities() ” ฟังก์ชันเพื่อกำหนดค่ายูทิลิตี้คงที่ที่ต้องการ ตัวอย่างเช่น เราได้กำหนดค่ายูทิลิตี้คงที่ต่อไปนี้:
ปลั๊กอิน const = ต้องการ ('tailwindcss / ปลั๊กอิน')
โมดูลส่งออก = {
เนื้อหา: ['./index.html'],
ปลั๊กอิน: [
ปลั๊กอิน (ฟังก์ชัน ({ addUtilities }) {
addUtilities({
'.content-auto': {
'การมองเห็นเนื้อหา': 'อัตโนมัติ'
},
'.content-hidden': {
'การเปิดเผยเนื้อหา': 'ซ่อน'
},
'.bg-ปะการัง': {
พื้นหลัง: 'ปะการัง'
},
'.skew-5deg': {
แปลงร่าง: 'เอียง (-5 องศา)',
},
})
})
]
};
ที่นี่:
- “ addUtilities() ” ฟังก์ชันลงทะเบียนยูทิลิตีแบบสแตติกแบบกำหนดเองโดยจัดเตรียมออบเจกต์ที่มีคลาสยูทิลิตี้และสไตล์ที่สอดคล้องกัน
- “ .content-auto ” คลาสยูทิลิตี้ตั้งค่าคุณสมบัติการมองเห็นเนื้อหาเป็นอัตโนมัติ
- “ .content-hidden ” คลาสยูทิลิตี้ตั้งค่าคุณสมบัติการเปิดเผยเนื้อหาเป็นซ่อน
- “ .bg-ปะการัง ” คลาสยูทิลิตี้ตั้งค่าสีปะการังเป็นพื้นหลัง
- “ .เอียง-5 องศา ” คลาสยูทิลิตี้ตั้งค่าคุณสมบัติการแปลงเป็น skewY (-5deg)
ขั้นตอนที่ 2: ใช้ Static Utilities ในโปรแกรม HTML
ตอนนี้ ใช้ยูทิลิตี้คงที่ที่ต้องการในโปรแกรม HTML:
< แผนก ระดับ = 'h-หน้าจอ bg-ปะการัง' >
< หน้า ระดับ = 'เนื้อหาอัตโนมัติ' >สวัสดี< / หน้า >
< หน้า ระดับ = 'เนื้อหาที่ซ่อนอยู่' >ยินดีต้อนรับที่นี่< / หน้า >
< หน้า ระดับ = 'เอียง-5 องศา' >แปลงข้อความ< / หน้า >
< / แผนก >
< / ร่างกาย >
ขั้นตอนที่ 3: ตรวจสอบผลลัพธ์
สุดท้าย เรียกใช้โปรแกรม HTML เพื่อให้แน่ใจว่ายูทิลิตี้แบบคงที่ทำงานอย่างถูกต้อง:
เอาต์พุตด้านบนบ่งชี้ว่ายูทิลิตี้แบบคงที่ทำงานอย่างถูกต้องตามที่กำหนดไว้
บทสรุป
หากต้องการใช้ยูทิลิตี้แบบคงที่ใน Tailwind จำเป็นต้องใช้ ' addUtilities() ” ในไฟล์ “tailwind.config.js” และกำหนดค่ายูทิลิตี้คงที่ที่ต้องการ ฟังก์ชัน “addUtilities()” และเพิ่มคลาสยูทิลิตี้ที่สามารถนำไปใช้โดยตรงในโปรแกรม HTML บทความนี้ได้อธิบายวิธีการใช้ยูทิลิตี้แบบคงที่ใน Tailwind CSS