Guia para estilizar o texto usando Tailwind CSS

Este artigo fornecerá um guia para estilizar o texto no Tailwind usando o seguinte esquema:

• Usar classe de alinhamento de texto
• Forneça cores ao conteúdo do texto
• Use famílias de fontes diferentes
• Fornece decorações de sublinhado ao texto
• Fornecer recuos ao texto

Como usar a classe Text Align no Tailwind?

Ao estilizar o conteúdo do texto, o posicionamento do texto é tão importante quanto a decoração. Se o texto não estiver alinhado corretamente, todo o design da página ficará estranho. Para alinhar o texto no Tailwind, a seguinte classe é usada:

As opções de alinhamento incluem “ Centro ',' esquerda ',' certo ', e ' justificar ”. Vamos entender cada um desses alinhamentos usando a demonstração abaixo:

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

• Quatro “ p ”Os elementos são criados e separados por uma quebra de linha.
• O texto dos quatro elementos p é alinhado a uma posição específica usando o “ texto-{alinhamento} ' aula.
• O ' bg-{cor}-{número} ”classe fornece a cor de fundo para cada“ p ' elemento.

Saída

Pode ser visto na saída abaixo como cada uma das classes de alinhamento afeta a posição do texto. Você pode ver que o texto do primeiro elemento está alinhado ao centro, o segundo à direita, o terceiro à esquerda e o quarto elemento mostra texto justificado:

Como fornecer cor ao conteúdo de texto no Tailwind?

A cor desempenha um papel importante no estilo do conteúdo de texto de um elemento. Se uma cor apropriada não for selecionada, o texto poderá ficar difícil de ler. Isso afetará negativamente o design do layout. Para definir a cor de um texto no Tailwind, use a classe fornecida abaixo:

Na sintaxe definida acima, o usuário deverá fornecer o nome da cor seguido de um número que será responsável pela tonalidade da cor especificada.

A demonstração fornecida abaixo tem três “ p ”Elementos estilizados usando diferentes classes de cores de texto:

As classes usadas no código acima são as seguintes:

• O primeiro ' p ”O elemento é fornecido com uma cor violeta usando o“ texto-{cor}-{número} ' aula.
• O segundo e o terceiro “ p ”Os elementos são fornecidos com as cores vermelha e verde usando o mesmo método.
• O ' centro de texto ”Classe posiciona o conteúdo do texto no centro do elemento.

Saída

A partir da saída abaixo, fica claro que a cor preta padrão do texto é alterada para as cores especificadas usando a classe text-{color}-{number}:

Como usar diferentes famílias de fontes no Tailwind?

A fonte de um elemento de texto pode ser usada para enfatizar um texto específico. Cada fonte possui características próprias. Para alterar a fonte de um elemento no Tailwind, utilize a seguinte classe:

Tailwind fornece três famílias de fontes padrão, ou seja, “ sem ',' serifa ', e ' mono ”. Cada uma dessas famílias de fontes possui um estilo de fonte diferente.

Da mesma forma, o “ espessura da fonte} ”A classe pode ser usada para deixar o texto em negrito, claro ou normal. Vamos usar uma demonstração para fornecer espessura de fonte para diferentes famílias de fontes no Tailwind:

Explicação para o código:

• Os três ' p ”Os elementos são fornecidos pelas famílias de fontes “mono”, “serf” e “sans” usando o “ família de fontes} ' aula.
• Da mesma forma, os três “ p ”elementos são fornecidos como“ extrabold ',' seminegrito ', e a ' luz extra ”pesos de fonte usando o“ espessura da fonte} ' aula.
• Todos esses elementos usam o “ centro de texto ”Classe que coloca o texto no centro do elemento.

Saída

A saída fornecida mostra que cada “ p ”O elemento tem uma família de fontes e pesos de fonte diferentes:

Como fornecer decorações de sublinhado ao texto no Tailwind?

Os elementos de texto também podem ser estilizados adicionando diferentes tipos de sublinhados. Isso pode ser usado para enfatizar uma parte de um texto. Para fornecer sublinhados a um elemento de texto, a seguinte classe é usada:

A palavra ' sublinhado ”Fornece um sublinhado básico para o elemento e o“ decoração-{estilo} ”A classe é usada para fornecer estilos diferentes ao sublinhado. Vamos entender isso usando a demonstração fornecida abaixo:

No código acima, existem quatro “ p ”Elementos fornecidos pelo“ sólido ',' dobro ',' ondulado ', e ' pontilhado ” sublinhados com estilo.

Saída:

Fica claro na saída a seguir que os elementos foram estilizados usando as diferentes classes de decoração sublinhadas:

Como fornecer recuos ao texto no Tailwind?

Em qualquer documento de texto, os recuos são usados ​​para formatar o conteúdo do texto. Tailwind também fornece uma classe padrão para fornecer recuo ao conteúdo de texto usando a seguinte classe:

A largura na sintaxe definida acima é responsável pelo tamanho da margem de recuo fornecida ao conteúdo do texto.

Vamos estilizar dois elementos de texto atribuindo-lhes diferentes valores de recuo e ver o resultado:

No código acima, dois “ p ”são fornecidos com o recuo da largura“ 4 ”&“ 28 ”Respectivamente. O primeiro elemento também é fornecido com o preenchimento superior-inferior usando o “ página 12 ' aula.

Saída:

Pode-se observar na saída abaixo que o segundo elemento de texto possui uma margem maior no início do texto devido à maior largura de recuo:

Trata-se de estilizar o texto usando Tailwind.

Conclusão

Tailwind fornece várias classes para estilizar elementos de texto. Para estilizar o texto no Tailwind, o usuário pode utilizar “ texto-{cor}-{número} ',' texto-{alinhamento} ',' sublinhar decoração-{estilo} ', e ' recuo-{largura} ' aula. Este artigo forneceu um guia para estilizar o texto usando várias classes no Tailwind.