Decoração de Texto Tailwind

Este artigo amplia nosso conhecimento sobre decoração de texto Tailwind e suas classes com exemplos.

A decoração de texto é um aspecto essencial do web design. Refere-se aos elementos visuais adicionados ao texto para torná-lo mais legível e atraente.

Além disso, pode ser usado para diferenciar títulos do corpo do texto, para indicar links ou para destacar pontos-chave. Com a decoração de texto certa, você pode criar uma experiência de usuário mais envolvente e interativa.

Índice-

Decoração de Texto Tailwind:
- Classes de decoração de texto Tailwind:

Classes de decoração de texto Tailwind:

O Tailwind fornece uma variedade de classes para adicionar estilos básicos de decoração de texto ao seu site.

Essas classes são baseadas nas propriedades de decoração de texto CSS padrão e incluem:

Aulas	Visão geral
sublinhado	Esta classe é usada para adicionar um sublinhado ao elemento de texto. Sublinhado é uma linha abaixo do texto.
linha superior	Usando esta classe, podemos adicionar um overline ao elemento de texto. Overline é uma linha acima do texto.
line-through	Nesse caso, uma linha é inserida no texto.
sem sublinhado	Esta classe é usada para remover o sublinhado aplicado a um elemento de texto.

Sintaxe

<element class="underline">...</element>

O exemplo a seguir se concentra na implementação das classes sublinhado e sublinhado no Tailwind:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
 <p class="">Using underline class</p>
 <p class="underline mt-4"> 
     MrExamples: Learning through examples
 </p>
 </div>
 <div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
 <p class="">Using overline class</p>
 <p class="overline mt-4"> 
     MrExamples: Learning through examples
 </p>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo acima usa classes Tailwind CSS para adicionar estilos de decoração de texto a uma página da web.

As classes aplicadas aos elementos controlam propriedades como margem, preenchimento, largura, cor de fundo , tamanho da fonte, espessura da fonte e cantos arredondados.

As classes underline e overline são usadas para adicionar estilos de decoração de texto a elementos específicos.

Para este exemplo, vamos considerar a implementação das classes line-through e no-underline no Tailwind:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
 <p class="">Using line-through class</p>
 <p class="line-through mt-4"> 
     MrExamples: Learning through examples
 </p>
 </div>
 <div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
 <p class="">Using no-underline class</p>
 <p class="no-underline mt-4"> 
     MrExamples: Learning through examples
 </p>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nós valorizamos o seu feedback.

Decoração de Texto Tailwind

Classes de decoração de texto Tailwind:

Sintaxe

Example:

Example:

Sentindo entediado?