Tailwind CSS proporciona ' alinear elements ” utilitats per controlar la posició dels elements flexibles i de quadrícula al llarg de l'eix transversal del contenidor. Té diverses classes d'utilitat, com ara 'items-start', 'items-center', 'items-end', 'items-baseline', etc. A més, els usuaris també poden utilitzar la propietat hover amb 'items-
Aquest article exemplificarà el mètode d'aplicació de les utilitats de passar el cursor sobre els elements d'alineació a Tailwind CSS.
Com aplicar el cursor a les utilitats d''alineació d'elements' a Tailwind?
Per aplicar el ratolí a les utilitats 'align-items' a Tailwind, creeu una estructura HTML i afegiu el ' flotar 'classe d'utilitat amb el' desitjat elements-
Sintaxi
< element classe = 'hover:items-
Substituïu
Exemple
En aquest exemple, farem un contenidor flexible amb la propietat 'items-start'. Aleshores, farem servir el ' hover:elements-centre ' classe a la ' Sortida Per aplicar l'efecte de flotació a les utilitats 'alinear-elements' a Tailwind, utilitzeu el ' flotar 'classe d'utilitat amb el particular' elements-
< cos >
< div classe = 'flex elements-start hover:elements-center justificar-al voltant del text-center h-44 m-3 bg-pink-300 gap-4' >
< div classe = 'bg-pink-600 py-4 w-40' > 1 div >
< div classe = 'bg-pink-600 py-12 w-40' > 2 div >
< div classe = 'bg-pink-600 py-8 w-40' > 3 div >
div >
cos >
Aquí:
Des de la pàgina web anterior, es pot observar que l'alineació dels elements flexibles està canviant al llarg de l'eix transversal del contenidor al passar el cursor. Conclusió