No entanto, este artigo irá elaborar duas classes específicas que são figuras proporcionais e figuras tabulares. Eles são usados para estilizar os valores numéricos no Tailwind e organizar e representar os dados numéricos de uma forma que seja atraente para o design do documento.
Este artigo irá elaborar os números proporcionais e tabulares no Tailwind CSS usando o seguinte esquema:
- Como usar números proporcionais no Tailwind CSS?
- Como usar figuras tabulares no Tailwind CSS?
- Diferença entre figuras proporcionais e tabulares
Como usar números proporcionais no Tailwind CSS?
A classe de figuras proporcionais atribuirá ao elemento uma convenção onde cada número não tem a mesma largura.
Sintaxe
A sintaxe para usar os números proporcionais no Tailwind é a seguinte:
< divisão aula = 'números proporcionais' >
< divisão / >
Na sintaxe fornecida acima, o “ números proporcionais ”A classe deve ser fornecida ao elemento para usar números proporcionais.
Vejamos um exemplo prático de números proporcionais.
No código fornecido abaixo, dois “ p ”elementos estão contidos em um“ divisão ”elemento que usa a classe de figuras proporcionais:
< divisão aula = 'números proporcionais text-center bg-slate-200 text-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / divisão >
A explicação do código fornecido acima é a seguinte:
- O ' divisão ”Elemento usa o“ números proporcionais ”classe que aplicará a propriedade da figura proporcional aos números.
- O ' centro de texto ”classe posiciona o texto no centro do elemento.
- O ' bg-{cor}-{número} ”A classe é responsável pela cor de fundo do elemento.
- O ' texto-xl ”A classe fornece um tamanho de fonte extra grande para o texto.
- A seguir, dois “ p ”elementos são criados contendo números diferentes.
Saída
Pode-se ver na saída que os números no segundo “ p ”O elemento tem uma largura um pouco maior que o primeiro. Isso se deve à classe de números proporcionais:
Como usar figuras tabulares no Tailwind CSS?
As figuras tabulares no Tailwind atribuem a convenção a um elemento onde cada número tem o mesmo tamanho de largura. Isso cria uma representação simétrica dos números em forma de tabela.
Sintaxe
A sintaxe para usar as figuras tabulares é a seguinte:
< divisão aula = 'nums tabulares' >< divisão / >
Na sintaxe fornecida acima, o “ números tabulares ”A classe é fornecida ao elemento para usar as figuras tabulares.
Vamos ver como o “ números tabulares ”afeta os valores numéricos em um documento HTML. Para esta demonstração, dois “ p ”Com valores numéricos são criados e contidos em um“ divisão ”Elemento que usa a classe de figuras tabulares:
< divisão aula = 'Números tabulares text-center bg-slate-200 text-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / divisão >
No código acima, o “ números tabulares ”classe é fornecida para o“ divisão ” elemento que atribuirá o estilo das figuras tabulares ao filho “ p ”Elementos.
Saída:
Pode-se ver na saída acima que os valores numéricos em ambos os elementos estão perfeitamente alinhados devido aos mesmos tamanhos de largura dos dígitos.
Informações bônus: diferença entre figuras proporcionais e tabulares no Tailwind CSS
Vejamos uma demonstração que diferencia o efeito das classes de figuras tabulares e proporcionais nos valores numéricos. Nesta demonstração, os elementos receberão a classe de figuras proporcionais como padrão. A seguir, usando o estado hover, os elementos serão atribuídos à classe de figuras tabulares:
< divisão aula = 'nums proporcionais text-center bg-slate-200 text-xl hover:nums tabulares' >< p > 121212 < / p >
< p > 838383 < / p >
< / divisão >
Pode ser visto no código acima que o “ divisão ”O elemento é fornecido com o“ números proporcionais ”, que será a convenção padrão que os valores numéricos seguirão.
Da mesma forma, devido ao “ pairar: números tabulares ”classe, os valores numéricos seguirão a convenção de figuras tabulares sempre que o usuário passar o cursor do mouse sobre o elemento “div”.
Saída
Na saída fornecida, a largura dos valores numéricos muda quando o usuário passa o mouse sobre o elemento. Isso fornece a diferença visual entre os números proporcionais e tabulares no Tailwind:
Trata-se de números proporcionais e tabulares no Tailwind.
Conclusão
Para usar números proporcionais no Tailwind, o “ números proporcionais ”classe é usada. Os números proporcionais usam a convenção onde cada valor numérico tem um tamanho de largura diferente. Para usar os números tabulares no Tailwind, o “ números tabulares ”classe é usada. As figuras tabulares usam a convenção onde cada valor numérico tem o mesmo tamanho de largura. Este artigo forneceu o procedimento para usar os números proporcionais e tabulares no Tailwind.