Artikel ini menjelaskan prosedur untuk mengontrol jenis font suatu elemen menggunakan utilitas Tailwind.
Bagaimana Mengontrol Kelompok Font suatu Elemen Menggunakan Utilitas Tailwind?
Untuk mengontrol jenis font suatu elemen di Tailwind, utilitas berikut harus disediakan untuk elemen tersebut:
huruf- { keluarga font }
Ada tiga jenis font default yang dapat diatur menggunakan utilitas yang disediakan di atas. Ini termasuk ' serif ', ' tanpa ', Dan ' mono ”.
Mari gunakan jenis font ini dalam demonstrasi menggunakan “ font-{keluarga font} ” kelas untuk melihat cara kerjanya:
< div kelas = ' font-serif bulat-xl bayangan-lg pusat teks py-2 my-2 bg-green-100 ' >
Ini adalah keluarga FONT-SERIF
< / div >
< div kelas = 'font-sans bulat-xl bayangan-lg pusat teks py-2 my-2 bg-biru-100' >
Ini adalah keluarga FONT-SANS
< / div >
< div kelas = 'font-mono bulat-xl bayangan-lg pusat teks py-2 my-2 bg-merah-100' >
Ini adalah keluarga FONT-MONO
< / div >
Penjelasan kode di atas adalah sebagai berikut:
- Ada tiga elemen div yang dibuat menggunakan “ ” dan disediakan dengan jenis font yang berbeda.
- “ font-{keluarga} Kelas ” akan memberikan jenis font yang ditentukan ke teks dalam elemen.
- “ bulat-xl ” kelas akan membuat sudut elemen div menjadi bulat.
- “ bayangan-lg Kelas ” akan memberikan bayangan besar pada elemen div.
- “ pusat teks ” akan menyelaraskan teks ke tengah elemen.
- “ py-2 ' Dan ' saya-2 ” kelas akan menyediakan “ 8 piksel ” padding dan margin pada arah atas dan bawah elemen.
- “ bg-{warna}-{angka} Kelas ” bertanggung jawab untuk mengatur latar belakang elemen ke warna yang ditentukan.
Dari keluarannya, terlihat jelas bahwa setiap elemen memiliki jenis font yang berbeda:
Kita juga dapat secara dinamis mengubah jenis font suatu elemen menggunakan fungsi hover. Sebagai ilustrasi, lihat kode di bawah ini:
< div kelas = 'saya-2 bulat-xl bg-slate-100 py-2 pusat teks font-mono shadow-lg hover: font-serif' >Ini adalah keluarga FONT-MONO secara Default< / div >Dalam kode yang disediakan di atas, “ arahkan kursor: font-{keluarga} ” Utilitas bertanggung jawab untuk mengubah jenis font elemen segera setelah kursor mouse diarahkan ke atasnya. Dapat dilihat pada output bahwa jenis font teks berubah ketika pengguna mengarahkan kursor mouse ke atasnya:
Sekian tentang mengontrol jenis font suatu elemen di Tailwind.
Kesimpulan
Di Tailwind, sebuah elemen dapat ditetapkan ke jenis font menggunakan “ font-{keluarga} ' kelas. Ada tiga jenis font default yang disediakan oleh Tailwind yaitu “ tanpa ', ' serif ', Dan ' mono ”. Pengguna juga dapat mengubah jenis font suatu elemen setelah perubahan status elemen. Artikel ini telah menyediakan prosedur untuk mengontrol jenis font suatu elemen di Tailwind.