CSS oferece uma variedade de estruturas para programadores projetarem páginas web dinâmicas. É mais agradável porque fornece todos os recursos e ferramentas importantes em um só lugar. Portanto, você não precisa usar outras estruturas. O framework Tailwind em CSS é o mais utilizado porque economiza o tempo do usuário para escrever CSS excessivo.
Este guia fornece o uso de foco, foco e outros estados no Tailwind.
Como usar Hover, Focus e outros estados no Tailwind?
Ao projetar páginas web, é necessário agregar elementos dinâmicos e atrativos para manter a interatividade com os usuários. Os recursos do Tailwind podem ser utilizados para criar páginas interativas e dinâmicas sem escrever CSS personalizado adicional. Alguns recursos são “hover”, “focus” e “active” que ajudam a adicionar atração aos designs.
Usando a variante Hover em HTML
A propriedade hover é usada para estilizar um elemento HTML quando o usuário move o cursor do mouse sobre um elemento específico. Ajuda a apresentar uma experiência tranquila.
Etapa 1: aplicar a propriedade “hover” em HTML
Crie um arquivo HTML e aplique a propriedade hover a algum elemento do código. Para ter uma ideia dê uma olhada no código abaixo:
< corpo >
< divisão aula = 'Centro' >
< botão aula = 'bg-green-500 hover:bg-blue-500 texto-branco fonte-negrito arredondado' >
Passe o mouse sobre mim!
< / botão >
< / divisão >
< / corpo >
Neste código:
- Um botão chamado “ Passe o mouse sobre mim! ”É criado pela tag do botão.
- “ bg-verde-500 ”define a cor de fundo do botão para verde.
- “ pairar: bg-blue-500 ”muda a cor do botão de verde para azul quando o mouse é movido sobre ele.
- O texto do botão tem a cor branca “ texto-branco ' e ' Negrito ”torna a fonte em negrito.
- O formato do botão é definido como arredondado por “ arredondado ”.
Etapa 2: visualizar a saída
Depois de executar o código acima, a visualização final ficará assim:
Pode-se observar que o botão muda de cor quando o cursor do mouse é movido sobre ele.
Usando a variante Focus em HTML
A propriedade focus é usada para estilizar elementos HTML de forma que quando o usuário clica no elemento ele seja destacado para chamar a atenção do usuário.
Etapa 1: aplique a propriedade Focus no código HTML
Crie um arquivo HTML e aplique a propriedade focus a algum elemento desejado. Para ter uma impressão, considere o código abaixo:
< divisão >
< / divisão >
< / corpo >
Neste código:
- O ' flexionar ”classe cria um flex.
- O ' justificar-centro ”justifica o alinhamento do conteúdo ao centro.
- O ' centro de itens ”A classe ajusta os objetos para o centro da tela.
- O ' tela h ”Define o tamanho da tela de acordo com a janela de visualização.
- “ bg-azul-200 ”define a cor de fundo para azul.
- Uma caixa de entrada do tipo texto é criada.
- O ' foco: bg-verde-300 ”muda a cor da caixa de entrada para verde quando clicado pelo usuário.
- “ w-64 ”define a largura para 64px.
- “ h-10 ”define a altura para 10px.
- “ px-4 ”adiciona um preenchimento de 4px na parte superior e no lado esquerdo.
- “ py-2 ”adiciona um preenchimento de 2px na parte superior e inferior.
Etapa 2: visualizar a propriedade Focus
Salve o código HTML e abra a página criada por ele. Em seguida, mova o cursor na caixa de entrada e clique nela e a alteração abaixo acontecerá:
Usando a variante ativa em HTML
Esta propriedade é usada para estilizar elementos para a condição quando o usuário toca dinamicamente no elemento. O estado ativo é o período de tempo desde o estágio de ativação do cursor até seu estado liberado.
Sintaxe
ativo: { propriedade }A propriedade CSS específica é aplicada ao elemento selecionado.
Etapa 1: aplique a variante ativa no código HTML
Crie um arquivo HTML e aplique a propriedade active a algum elemento que no caso abaixo é um botão:
< divisão aula = 'flex justify-center items-center h-screen' >
< botão aula = 'bg-green-600 p-4 round-md transição-transformação duração-400 transformação ativa:escala-110' >
Clique em MIM!
< / botão >
< / divisão >
< / corpo >
Neste código:
- “ bg-verde-600 ”define a cor de fundo para verde.
- “ página-4 ”adiciona um preenchimento de 4px.
- “ MD arredondado ”torna o formato do botão arredondado.
- “ transformação de transição ”É usado para transformar o botão por um pequeno período de tempo definido por“ transformação duração-400 ”.
- O ' ativo:escala-110 ”transforma o botão para um tamanho maior.
Etapa 2: visualizar a saída
Salve o código acima em um arquivo HTML e visualize a página criada por ele. A página da web será semelhante a:
Pode-se observar que o tamanho do botão aumenta quando o mouse o segura e assim que é liberado ele retorna ao seu estado inicial.
Conclusão
Para usar foco, foco e outros estados no Tailwind, use as classes de estado predefinidas como “hover” e aplique algumas propriedades de estilo a ele, como mudança de cor, criação de um anel de foco e assim por diante. Os utilitários de exibição são usados para apresentar uma saída escalável. Este artigo demonstrou o método para usar foco, foco e outros estados no Tailwind.