Artikel ini menyediakan prosedur untuk mengawal keluarga fon elemen menggunakan utiliti Tailwind.
Bagaimana untuk Mengawal Keluarga Font Elemen Menggunakan Utiliti Tailwind?
Untuk mengawal keluarga fon elemen dalam Tailwind, utiliti berikut perlu disediakan kepada elemen:
fon- { keluarga fon }
Terdapat tiga keluarga fon lalai yang boleh ditetapkan menggunakan utiliti yang disediakan di atas. Ini termasuk ' serif ',' tanpa ”, dan “ mono ”.
Mari gunakan keluarga fon ini dalam demonstrasi menggunakan ' font-{font family} ” kelas untuk melihat cara ia berfungsi:
< div kelas = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Ini adalah keluarga FONT-SERIF
< / div >
< div kelas = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Ini adalah keluarga FONT-SANS
< / div >
< div kelas = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Ini adalah keluarga FONT-MONO
< / div >
Penjelasan untuk kod di atas adalah seperti berikut:
- Terdapat tiga elemen div yang dibuat menggunakan ' ” dan disediakan dengan keluarga fon yang berbeza.
- ' fon-{keluarga} ” kelas akan menyediakan keluarga fon yang ditentukan kepada teks dalam elemen.
- ' bulat-xl ” kelas akan membuat bucu elemen div bulat.
- ' bayang-lg ” kelas akan memberikan bayangan besar kepada elemen div.
- ' pusat teks ” akan menjajarkan teks ke tengah elemen.
- ' py-2 ” dan “ saya-2 'kelas akan menyediakan' 8px ” pelapik dan jidar di arah atas dan bawah elemen.
- ' bg-{warna}-{nombor} ” kelas bertanggungjawab untuk menetapkan latar belakang elemen kepada warna yang ditentukan.
Daripada output, jelas bahawa setiap elemen mempunyai keluarga fon yang berbeza:
Kami juga boleh menukar keluarga fon elemen secara dinamik menggunakan fungsi hover. Untuk ilustrasi, pergi melalui kod di bawah:
< div kelas = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Ini ialah keluarga FONT-MONO secara Lalai< / div >Dalam kod yang diberikan di atas, ' tuding: fon-{family} ” utiliti bertanggungjawab untuk menukar keluarga fon elemen sebaik sahaja kursor tetikus melayang di atasnya. Ia boleh dilihat dalam output bahawa keluarga fon teks berubah apabila pengguna menuding kursor tetikus di atasnya:
Itu semua tentang mengawal keluarga fon elemen dalam Tailwind.
Kesimpulan
Dalam Tailwind, elemen boleh diberikan keluarga fon menggunakan ' fon-{keluarga} ” kelas. Terdapat tiga keluarga fon lalai yang disediakan oleh Tailwind iaitu “ tanpa ',' serif ”, dan “ mono ”. Pengguna juga boleh menukar keluarga fon elemen apabila perubahan keadaan elemen. Artikel ini telah menyediakan prosedur untuk mengawal keluarga fon elemen dalam Tailwind.