บทความนี้ประกอบด้วยขั้นตอนในการควบคุมตระกูลแบบอักษรขององค์ประกอบโดยใช้ยูทิลิตี้ Tailwind
จะควบคุมตระกูลแบบอักษรขององค์ประกอบโดยใช้ยูทิลิตี้ Tailwind ได้อย่างไร
หากต้องการควบคุมกลุ่มแบบอักษรขององค์ประกอบใน Tailwind จะต้องจัดเตรียมยูทิลิตีต่อไปนี้ให้กับองค์ประกอบ:
แบบอักษร- { ตระกูลแบบอักษร }
มีตระกูลฟอนต์เริ่มต้นสามตระกูลที่สามารถตั้งค่าได้โดยใช้ยูทิลิตี้ที่ให้มาข้างต้น ซึ่งรวมถึง “ เซริฟ , ' ปราศจาก ', และ ' โมโน '.
ลองใช้ตระกูลฟอนต์เหล่านี้ในการสาธิตโดยใช้เครื่องหมาย “ แบบอักษร - {ตระกูลแบบอักษร} ” เพื่อดูวิธีการทำงาน:
< กอง ระดับ = ' font-serif ปัดเศษ-xl shadow-lg ข้อความ-ศูนย์ py-2 my-2 bg-green-100 ' >
นี่คือตระกูล FONT-SERIF
< / กอง >
< กอง ระดับ = 'font-sans ปัดเศษ-xl shadow-lg ข้อความ-ศูนย์ py-2 my-2 bg-blue-100' >
นี่คือตระกูล FONT-SANS
< / กอง >
< กอง ระดับ = 'แบบอักษร-โมโนปัดเศษ-xl shadow-lg ข้อความ-ศูนย์ py-2 my-2 bg-red-100' >
นี่คือตระกูล FONT-MONO
< / กอง >
คำอธิบายสำหรับโค้ดข้างต้นมีดังนี้:
- มีองค์ประกอบ div สามองค์ประกอบที่สร้างขึ้นโดยใช้ ' ” และมาพร้อมกับตระกูลฟอนต์ที่แตกต่างกัน
- “ แบบอักษร - {ครอบครัว} ” คลาสจะให้ตระกูลแบบอักษรที่ระบุให้กับข้อความในองค์ประกอบ
- “ โค้งมน-xl ” คลาสจะทำให้มุมขององค์ประกอบ div กลม
- “ เงา-lg ” คลาสจะให้เงาขนาดใหญ่แก่องค์ประกอบ div
- “ ศูนย์ข้อความ ” จะจัดข้อความให้อยู่ตรงกลางขององค์ประกอบ
- “ ไพ-2 ' และ ' ของฉัน-2 ” ชั้นเรียนจะจัดให้มี “ 8px ” ช่องว่างภายในและระยะขอบในทิศทางด้านบนและด้านล่างขององค์ประกอบ
- “ bg-{สี}-{จำนวน} ” คลาสมีหน้าที่รับผิดชอบในการตั้งค่าพื้นหลังขององค์ประกอบให้เป็นสีที่ระบุ
จากผลลัพธ์ เห็นได้ชัดว่าแต่ละองค์ประกอบมีตระกูลแบบอักษรที่แตกต่างกัน:
นอกจากนี้เรายังสามารถเปลี่ยนตระกูลแบบอักษรขององค์ประกอบแบบไดนามิกโดยใช้ฟังก์ชันโฮเวอร์ สำหรับภาพประกอบ ให้ใช้โค้ดด้านล่าง:
< กอง ระดับ = 'my-2 โค้งมน-xl bg-slate-100 py-2 ข้อความ-ศูนย์แบบอักษร-mono shadow-lg โฮเวอร์: แบบอักษร-serif' >นี่คือตระกูล FONT-MONO โดยค่าเริ่มต้น< / กอง >ในรหัสที่ให้ไว้ข้างต้น ' โฮเวอร์: แบบอักษร - {ครอบครัว} ” ยูทิลิตี้มีหน้าที่รับผิดชอบในการเปลี่ยนตระกูลแบบอักษรขององค์ประกอบทันทีที่เคอร์เซอร์ของเมาส์เลื่อนไปเหนือมัน จะเห็นได้ในผลลัพธ์ว่าตระกูลแบบอักษรของข้อความเปลี่ยนแปลงเมื่อผู้ใช้เลื่อนเคอร์เซอร์เมาส์ไปเหนือ:
นั่นคือทั้งหมดที่เกี่ยวกับการควบคุมตระกูลแบบอักษรขององค์ประกอบใน Tailwind
บทสรุป
ใน Tailwind องค์ประกอบสามารถกำหนดชุดแบบอักษรได้โดยใช้เครื่องหมาย “ แบบอักษร - {ครอบครัว} ' ระดับ. Tailwind มีตระกูลแบบอักษรเริ่มต้นสามตระกูล ได้แก่ “ ปราศจาก , ' เซริฟ ', และ ' โมโน '. ผู้ใช้ยังสามารถเปลี่ยนตระกูลแบบอักษรขององค์ประกอบเมื่อมีการเปลี่ยนแปลงสถานะขององค์ประกอบ บทความนี้ได้กล่าวถึงขั้นตอนในการควบคุมตระกูลแบบอักษรขององค์ประกอบใน Tailwind