Tailwind CSS fornece “ itens de alinhamento ” utilitários para controlar a posição de flex e itens de grade ao longo do eixo transversal do contêiner. Ele tem várias classes utilitárias, como “items-start”, “items-center”, “items-end”, “items-baseline”, etc. Além disso, os usuários também podem utilizar a propriedade hover com “items-
Este artigo exemplificará o método de aplicação dos utilitários hover on align-items no Tailwind CSS.
Como aplicar o foco nos utilitários “align-items” no Tailwind?
Para aplicar o hover nos utilitários “align-items” no Tailwind, crie uma estrutura HTML e adicione o “ flutuar ” classe utilitária com o desejado “ itens-
Sintaxe
< elemento aula = 'hover:itens-
Substitua
Exemplo
Neste exemplo, faremos um flex container com a propriedade “items-start”. Então, vamos usar o “ hover:items-center ” classe no “ Saída Para aplicar o efeito de foco nos utilitários “align-items” no Tailwind, utilize o “ flutuar ” classe utilitária com o particular “ itens-
< corpo >
< div aula = 'flexionar itens-iniciar foco: itens-centralizar justificar-ao redor do centro do texto h-44 m-3 bg-pink-300 gap-4' >
< div aula = 'bg-pink-600 py-4 w-40' > 1 div >
< div aula = 'bg-pink-600 py-12 w-40' > 2 div >
< div aula = 'bg-pink-600 py-8 w-40' > 3 div >
div >
corpo >
Aqui:
Na página da Web acima, pode-se observar que o alinhamento dos itens flexíveis está mudando ao longo do eixo cruzado do contêiner ao passar o mouse. Conclusão