Este artigo fornece o procedimento para controlar a família de fontes de um elemento usando os utilitários Tailwind.
Como controlar a família de fontes de um elemento usando os utilitários Tailwind?
Para controlar uma família de fontes de um elemento no Tailwind, o seguinte utilitário deve ser fornecido ao elemento:
Fonte- { família de fontes }
Existem três famílias de fontes padrão que podem ser definidas usando o utilitário fornecido acima. Esses incluem ' serifa ',' sem ', e ' mono ”.
Vamos usar essas famílias de fontes em uma demonstração usando o “ fonte-{família de fontes} ”classe para ver como funciona:
< divisão aula = ' font-serif arredondado-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Esta é uma família FONT-SERIF
< / divisão >
< divisão aula = 'font-sans arredondado-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Esta é uma família FONT-SANS
< / divisão >
< divisão aula = 'font-mono arredondado-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Esta é uma família FONT-MONO
< / divisão >
A explicação para o código acima é a seguinte:
- Existem três elementos div criados usando o “ ”E são fornecidos com diferentes famílias de fontes.
- O ' família de fontes} ”A classe fornecerá a família de fontes especificada para o texto no elemento.
- O ' arredondado-xl ”A classe fará com que os cantos do elemento div sejam arredondados.
- O ' sombra-lg ”A classe fornecerá uma grande sombra ao elemento div.
- O ' centro de texto ”alinhará o texto ao centro do elemento.
- O ' py-2 ' e ' meu-2 ”as aulas fornecerão“ 8px ”Preenchimento e margem na direção superior e inferior do elemento.
- O ' bg-{cor}-{número} ”A classe é responsável por definir o plano de fundo do elemento para a cor especificada.
A partir da saída, fica claro que cada elemento possui uma família de fontes diferente:
Também podemos alterar dinamicamente a família de fontes de um elemento usando a função hover. Para ilustração, siga o código abaixo:
< divisão aula = 'my-2 round-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Esta é uma família FONT-MONO por padrão< / divisão >No código fornecido acima, o “ pairar: fonte-{família} ”O utilitário é responsável por alterar a família de fontes do elemento assim que o cursor do mouse passa sobre ele. Pode-se ver na saída que a família de fontes do texto muda quando o usuário passa o cursor do mouse sobre ela:
Trata-se de controlar a família de fontes de um elemento no Tailwind.
Conclusão
No Tailwind, um elemento pode receber uma família de fontes usando o “ família de fontes} ' aula. Existem três famílias de fontes padrão fornecidas pelo Tailwind, ou seja, “ sem ',' serifa ', e ' mono ”. O usuário também pode alterar a família de fontes de um elemento mediante a alteração do estado de um elemento. Este artigo forneceu o procedimento para controlar a família de fontes de um elemento no Tailwind.