Como usar frações diagonais no Tailwind Css

Este artigo explicará como usar frações diagonais no Tailwind.

Como usar frações diagonais no Tailwind CSS?

A classe de fração diagonal no Tailwind é uma variante de fonte numérica predefinida que torna o numerador e o denominador menores e os separa por uma barra. Isso faz com que o número da fração pareça distinto do resto do texto.

Sintaxe

A sintaxe de uso do “ frações diagonais ”a classe é a seguinte:

Como você pode ver na sintaxe acima, o desenvolvedor deve fornecer “ frações diagonais ' no ' aula ”Atributo do elemento.

Vamos usar a classe “frações diagonais” como exemplo prático. Na demonstração abaixo, o usuário pode ver a diferença entre as frações normais e as frações diagonais:

A explicação do código acima é a seguinte:

• O ' divisão ”O elemento é criado e fornecido como a cor de fundo usando o“ bg-{cor}-{número} ' aula.
• Em seguida, o texto recebe uma fonte grande e é alinhado ao centro do elemento usando o botão “ texto-lg ' e ' centro de texto ”classes respectivamente.
• A seguir, dois “

  ”elementos são criados, onde o segundo é fornecido com o“ frações diagonais ' aula.

Saída:

A diferença entre a fração diagonal e a fração normal pode ser vista claramente na saída acima.

Usando classe de fração diagonal com pontos de interrupção

Os pontos de interrupção são usados ​​como consultas de mídia no Tailwind. Existem cinco pontos de interrupção padrão com larguras mínimas especificadas. Esses pontos de interrupção podem ser usados ​​com qualquer classe no Tailwind para criar layouts de design responsivos e dinâmicos.

Para usar o “ frações diagonais ”classe com um ponto de interrupção no Tailwind, a seguinte sintaxe é usada:

A tabela abaixo fornece a largura mínima para diferentes pontos de interrupção no Tailwind:

Vamos usar pontos de interrupção com o “ frações diagonais ”Aula para entender praticamente seu uso:

No código fornecido acima, um elemento div é fornecido no “ md: frações diagonais ”classe que irá alterar a fonte das frações numéricas quando o“ médico ”O ponto de interrupção é atingido.

Saída

Como você pode ver na saída, os números fracionários são fornecidos com a fonte de fração diagonal quando o “ médico ”O ponto de interrupção é atingido:

Usando a classe de fração diagonal com estados de vento favorável

Tailwind fornece padrão “ estados ” para fornecer propriedades de design a um elemento quando esse estado específico for acionado. Isso torna o layout do design mais atraente e dinâmico. Para usar a classe “frações diagonais” com um estado no Tailwind, a seguinte sintaxe é usada:

O estado padrão fornecido pelo Tailwind é o seguinte:

• Flutuar: Quando o usuário passa o cursor sobre o elemento.
• Foco: Quando o usuário foca em um elemento navegando até ele.
• Ativo: Quando o usuário ativa um elemento clicando nele.
• Desativar: Quando o usuário não tem permissão para ativar um elemento.

A demonstração abaixo fornece um exemplo prático de uso do “ frações diagonais ”classe com o“ flutuar ”estado no Tailwind:

O ' divisão ”O elemento no código acima é fornecido por um“ pairar: frações diagonais ”Classe que mudará a fonte normal dos números das frações para a fonte da fração diagonal.

Saída

Como você pode ver na saída, a fonte numérica do número da fração muda conforme o usuário passa o cursor do mouse sobre ele:

Trata-se de usar a classe de fração diagonal no Tailwind CSS.

Conclusão

Para usar as frações diagonais no Tailwind CSS, use o “ fração diagonal ' aula. Esta classe irá separar o numerador e o denominador com uma barra e torná-los pequenos. Os usuários também podem usar a classe “diagonal-fractions” com os pontos de interrupção e estados padrão no Tailwind para tornar o design mais dinâmico. Este artigo forneceu o procedimento para usar as frações diagonais no Tailwind.