Como aplicar foco, foco e estados ativos com espessura de decoração de texto no Tailwind

Como Aplicar Foco Foco E Estados Ativos Com Espessura De Decoracao De Texto No Tailwind



Ao criar sites baseados em conteúdo, muitas vezes é necessário que o programador destaque as terminologias vitais para uma melhor experiência e compreensão do usuário. Nesse caso, o “ Espessura da Decoração de Texto ” Entra em vigor o utilitário no Tailwind que pode ser incorporado de forma customizada de acordo com o layout do site.

Este tutorial explica o seguinte conteúdo:

Como aplicar foco, foco e estados ativos com espessura de decoração de texto no Tailwind?

O ' Espessura da decoração do texto ” pode ser aplicado com esses estados utilizando o estado alvo e o “ espessura da decoração do texto ”Propriedade seguida pelo valor da espessura alvo em pixels. A integração dessas abordagens altera a espessura da decoração do texto (em pixels) ao passar o mouse, ao elemento ser focado ou ao elemento estar ativo. Esses pixels podem ser “ 1px ',' 2 pixels ',' 4px ' ou ' 8px ”. É tal que quanto mais pixels, maior é a espessura.





Exemplo 1: Aplicando a espessura da decoração do texto com o estado “hover”

Este exemplo aplica o “ espessura da decoração do texto ”propriedade com o“ flutuar ”estado para definir a espessura ao passar o mouse:





< HTML >

< cabeça >

< meta conjunto de caracteres = 'utf-8' >

< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >

< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >

< corpo >

< área de texto aula = 'sublinhado pairar: decoração-4' > James é pontual < / área de texto >

< / corpo >

< / HTML >

Neste trecho de código, inclua o caminho CDN na tag “” para usar as funcionalidades do Tailwind. Depois disso, dentro do “ <área de texto> ”Elemento, especifique o“ flutuar ”estado junto com o aplicado“ espessura da decoração do texto ”Propriedade que define a espessura da decoração do sublinhado padrão para uma espessura aumentada de “4” pixels ao passar o mouse.



Saída



Esta saída implica que a espessura da decoração do texto, ou seja, o sublinhado, seja definida de acordo.



Exemplo 2: Aplicando a espessura da decoração do texto com estado “foco”

O código de exemplo a seguir implementa a espessura da decoração do texto para um valor de pixel alvo quando o elemento é focado usando o “ Aba ' chave:



< HTML >

< cabeça >

< meta conjunto de caracteres = 'utf-8' >

< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >

< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >

< corpo >

< área de texto aula = 'sublinhar decoração-1 foco: decoração-4' >James é pontual< / área de texto >

< / corpo >

< / HTML >

Neste bloco de código, repita as abordagens discutidas para incorporar o caminho CDN e o “ <área de texto> ' elemento. Agora, especifique a espessura padrão junto com a espessura da transição, ou seja, “4” pixels com “ foco ”Estado para aplicar a alteração no estado acionado.

Observação: O padrão ' sublinhado ' e a ' sublinhar decoração-1 ”Propriedades produzem o mesmo resultado.

Saída

A partir desta saída, pode-se verificar que a espessura da decoração do texto muda de acordo.

Exemplo 3: Aplicando a espessura da decoração de texto com estado “ativo”

Neste trecho de código, a espessura da decoração do texto é alterada quando o elemento está ativo:



< HTML >

< cabeça >

< meta conjunto de caracteres = 'utf-8' >

< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >

< roteiro fonte = 'https://cdn.tailwindcss.com' >< / roteiro >< / cabeça >

< corpo >

< área de texto aula = 'sublinhar decoração-1 ativo: decoração-8' >James é pontual< / área de texto >

< / corpo >

< / HTML >

De acordo com essas linhas de código, da mesma forma, incorpore o caminho CDN e o elemento “