Tailwind CSS menyediakan “ align-item ” utiliti untuk mengawal kedudukan item lentur dan grid di sepanjang paksi silang bekas. Ia mempunyai pelbagai kelas utiliti, seperti 'item-start', 'item-center', 'item-end', 'item-baseline', dll. Selain itu, pengguna juga boleh menggunakan sifat tuding dengan 'item-
Artikel ini akan memberi contoh kaedah menggunakan hover pada align-item” utiliti dalam Tailwind CSS.
Bagaimana untuk Memohon Tuding pada Utiliti 'align-item' dalam Tailwind?
Untuk menggunakan tuding pada utiliti 'align-item' dalam Tailwind, buat struktur HTML dan tambahkan ' berlegar 'kelas utiliti dengan yang dikehendaki' item-
Sintaks
< unsur kelas = 'hover:items-
Gantikan
Contoh
Dalam contoh ini, kami akan membuat bekas flex dengan sifat 'item-start'. Kemudian, kami akan menggunakan ' hover:item-center 'kelas dalam' Pengeluaran Untuk menggunakan kesan hover pada utiliti 'align-item' dalam Tailwind, gunakan ' berlegar 'kelas utiliti dengan 'khusus' item-
< badan >
< div kelas = 'item fleksibel-mulakan tuding:item-pusat justify-sekitar pusat-teks h-44 m-3 bg-merah jambu-300 gap-4' >
< div kelas = 'bg-pink-600 py-4 w-40' > 1 div >
< div kelas = 'bg-merah jambu-600 py-12 w-40' > 2 div >
< div kelas = 'bg-merah jambu-600 py-8 w-40' > 3 div >
div >
badan >
di sini:
Daripada halaman web di atas, dapat diperhatikan bahawa penjajaran item flex berubah di sepanjang paksi silang bekas pada tuding. Kesimpulan