Bài viết này cung cấp quy trình kiểm soát họ phông chữ của một phần tử bằng tiện ích Tailwind.
Làm cách nào để kiểm soát họ phông chữ của một thành phần bằng tiện ích Tailwind?
Để kiểm soát họ phông chữ của một thành phần trong Tailwind, tiện ích sau phải được cung cấp cho thành phần đó:
nét chữ- { họ phông chữ }
Có ba họ phông chữ mặc định có thể được đặt bằng tiện ích được cung cấp ở trên. Bao gồm các ' serif ',' không có ', Và ' bệnh tăng bạch cầu đơn nhân ”.
Hãy sử dụng các họ phông chữ này trong phần trình diễn bằng cách sử dụng “ phông chữ-{họ phông chữ} ” lớp để xem nó hoạt động như thế nào:
< div lớp học = ' font-serif round-xl Shadow-lg text-center py-2 my-2 bg-green-100 ' >
Đây là họ FONT-SERIF
< / div >
< div lớp học = ' font-sans round-xl bóng-lg trung tâm văn bản py-2 my-2 bg-blue-100' >
Đây là dòng FONT-SANS
< / div >
< div lớp học = 'font-mono round-xl bóng-lg trung tâm văn bản py-2 my-2 bg-red-100' >
Đây là họ FONT-MONO
< / div >
Giải thích cho đoạn mã trên như sau:
- Có ba phần tử div được tạo bằng cách sử dụng “ ” và được cung cấp các họ phông chữ khác nhau.
- Các ' phông chữ-{gia đình} Lớp ” sẽ cung cấp họ phông chữ được chỉ định cho văn bản trong phần tử.
- Các ' làm tròn-xl ” class sẽ làm cho các góc của phần tử div trở nên tròn trịa.
- Các ' bóng-lg ” lớp sẽ cung cấp một cái bóng lớn cho phần tử div.
- Các ' trung tâm văn bản ” sẽ căn chỉnh văn bản vào giữa phần tử.
- Các ' py-2 ' Và ' của tôi-2 ” các lớp học sẽ cung cấp “ 8px ” đệm và lề theo hướng trên và dưới của phần tử.
- Các ' bg-{color}-{number} ” class chịu trách nhiệm thiết lập nền của phần tử theo màu được chỉ định.
Từ kết quả đầu ra, rõ ràng mỗi phần tử có một họ phông chữ khác nhau:
Chúng ta cũng có thể thay đổi linh hoạt họ phông chữ của một phần tử bằng chức năng di chuột. Để minh họa, hãy xem đoạn mã dưới đây:
< div lớp học = 'my-2 round-xl bg-slate-100 py-2 phông chữ trung tâm văn bản-mono bóng-lg di chuột: font-serif' >Mặc định đây là họ FONT-MONO< / div >Trong mã được cung cấp ở trên, “ di chuột: phông chữ-{family} Tiện ích ” chịu trách nhiệm thay đổi họ phông chữ của phần tử ngay khi con trỏ chuột di chuyển qua nó. Có thể thấy ở đầu ra rằng họ phông chữ của văn bản thay đổi khi người dùng di con trỏ chuột qua nó:
Đó là tất cả về việc kiểm soát họ phông chữ của một phần tử trong Tailwind.
Phần kết luận
Trong Tailwind, một phần tử có thể được gán một họ phông chữ bằng cách sử dụng “ phông chữ-{gia đình} ' lớp học. Có ba họ phông chữ mặc định được Tailwind cung cấp, tức là “ không có ',' serif ', Và ' bệnh tăng bạch cầu đơn nhân ”. Người dùng cũng có thể thay đổi họ phông chữ của một phần tử khi trạng thái của phần tử đó thay đổi. Bài viết này đã cung cấp quy trình kiểm soát họ phông chữ của một phần tử trong Tailwind.