Tailwind CSS şunları sağlar: hizalama öğeleri ” kabın çapraz ekseni boyunca esnek ve ızgara öğelerinin konumunu kontrol etmek için yardımcı programlar. 'items-start', 'items-center', 'items-end', 'items-baseline' vb. gibi çeşitli yardımcı sınıflara sahiptir. Ayrıca, kullanıcılar hover özelliğini 'items-
Bu makale, Tailwind CSS'de 'align-items' yardımcı programlarının üzerine gelmeyi uygulama yöntemini örnekleyecektir.
Tailwind'de 'align-items' Utilities'de Hover Nasıl Uygulanır?
Tailwind'deki 'align-items' yardımcı programlarının üzerine fareyle gelmek için bir HTML yapısı oluşturun ve ' üzerine gelin 'istenilen fayda sınıfı' öğeler-
Sözdizimi
< eleman sınıf = 'hover:öğeler-
Örnek
Bu örnekte, 'items-start' özelliğine sahip esnek bir kapsayıcı yapacağız. Ardından, “ vurgulu:öğe merkezi ' sınıfında ' Çıktı Tailwind'deki 'align-items' yardımcı programlarında fareyle üzerine gelme efektini uygulamak için ' üzerine gelin ' belirli ' ile yardımcı sınıf öğeler-
< vücut >
< div sınıf = 'Esnek öğeler-hover'ı başlat: öğeler-ortaya yasla-metin-merkez h-44 m-3 bg-pembe-300 boşluk-4' >
< div sınıf = 'bg-pembe-600 py-4 w-40' > 1 div >
< div sınıf = 'bg-pembe-600 py-12 w-40' > 2 div >
< div sınıf = 'bg-pembe-600 py-8 w-40' > 3 div >
div >
vücut >
Burada:
Yukarıdaki web sayfasından, esnek öğelerin hizalanmasının, fareyle üzerine gelindiğinde kabın çapraz ekseni boyunca değiştiği gözlemlenebilir. Çözüm