Tailwind CSS biedt “ uitlijnen-items ” hulpprogramma's om de positie van flex- en rasteritems langs de dwarsas van de container te regelen. Het heeft verschillende hulpprogrammaklassen, zoals 'items-start', 'items-center', 'items-end', 'items-baseline', enz. Verder kunnen gebruikers ook de eigenschap hover gebruiken met 'items-
Dit artikel illustreert de methode voor het toepassen van de muisaanwijzer op align-items”-hulpprogramma's in Tailwind CSS.
Hoe toepassen Hover op 'uitlijn-items' Hulpprogramma's in Tailwind?
Om de muisaanwijzer toe te passen op de 'uitlijn-items'-hulpprogramma's in Tailwind, maakt u een HTML-structuur en voegt u de ' zweven ” utiliteitsklasse met de gewenste “ items-
Syntaxis
< element klas = 'hover:items-
Vervang
Voorbeeld
In dit voorbeeld maken we een flexcontainer met de eigenschap 'items-start'. Dan gebruiken we de ' hover:items-centrum ” klas in de “ Uitgang Om het zweefeffect toe te passen op de hulpprogramma's 'items uitlijnen' in Tailwind, gebruikt u de ' zweven 'nutsklasse met de specifieke' items-
< lichaam >
< div klas = 'flex items-start hover:items-center rechtvaardigen-rondom tekst-center h-44 m-3 bg-pink-300 gap-4' >
< div klas = 'bg-roze-600 py-4 w-40' > 1 div >
< div klas = 'bg-roze-600 py-12 w-40' > 2 div >
< div klas = 'bg-roze-600 py-8 w-40' > 3 div >
div >
lichaam >
Hier:
Op de bovenstaande webpagina is te zien dat de uitlijning van de flex-items verandert langs de dwarsas van de container bij zweven. Conclusie