Estilos de Fonte Tailwind

O objetivo deste artigo é examinar o estilo de fonte Tailwind com exemplos e como ele pode ajudá-lo a criar uma tipografia elegante e consistente em seus sites.

Com a classe de estilo de fonte Tailwind, você pode aplicar estilos de fonte específicos a elementos HTML , como itálico ou normais.

Você pode usar esta classe para personalizar a aparência do texto em seu site ou aplicativo para aprimorar a experiência do usuário.

Índice-

Estilos de fonte Tailwind:

Classes de estilo de fonte Tailwind

Aulas	Visão geral
itálico	Usando esta classe, o texto será estilizado em itálico. É usado principalmente para enfatizar algo.
não-itálico	Ele define a propriedade de estilo de fonte de um elemento como normal, substituindo qualquer estilo “itálico” ou “oblíquo” anterior.

Estilo do Tipo de Letra Itálico

Esta classe aplica estilo itálico ao texto. Em itálico, o texto é inclinado para a direita e aparece mais estilizado.

Sintaxe

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

O exemplo a seguir se concentra no estilo de fonte usando a classe itálico no Tailwind :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Font Style Class in Tailwind CSS</p>
 <p class="font-medium text-gray-500 my-2">Using italic class</p>
 <div class="mx-auto w-fit bg-gray-200 rounded">
 <p class="p-4 italic text-justify">
  MrExamples: Learning through examples
 </p>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo de fonte não-itálico

Usando esta classe, a propriedade de estilo de fonte de um elemento é definida como o estilo padrão.

Essa classe é particularmente útil quando você deseja remover o estilo itálico do texto.

Sintaxe

<element class="not-italic">...</element>

O exemplo abaixo exibe o uso da classe não-itálico no Tailwind:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Font Style Class in Tailwind CSS</p>
 <p class="font-medium text-gray-500 my-2">Using not-italic class</p>
 <div class="mx-auto w-fit bg-gray-200 rounded">
 <p class="p-4 not-italic text-justify">
  MrExamples: Learning through examples
 </p>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O estilo da fonte Tailwind é um aspecto importante do design do site que pode afetar significativamente a legibilidade e a estética do seu texto.

Nós valorizamos o seu feedback.

Estilos de Fonte Tailwind

Classes de estilo de fonte Tailwind

Estilo do Tipo de Letra Itálico

Sintaxe

Example:

Estilo de fonte não-itálico

Sintaxe

Example:

Sentindo entediado?