Tipo de estilo de lista no Tailwind CSS

Neste artigo, exploraremos os diferentes tipos de estilo de lista Tailwind com exemplos e como usá-los em seus projetos.

Tailwind CSS fornece a capacidade de modificar o tipo de estilo de lista de listas não ordenadas e listas ordenadas usando as classes de utilitário de tipo de estilo de lista.

Ele determina o estilo do marcador usado para cada item da lista, como um marcador, número ou um símbolo personalizado.

Tipos de estilo de lista Tailwind



Classes de tipo de estilo de lista Tailwind

A seguir estão os tipos de estilo de lista Tailwind disponíveis:

tipos Visão geral
listar-nenhum Remove o marcador ou número dos itens da lista.
disco de lista Adiciona um círculo sólido como marcador aos itens da lista.
lista decimal Adiciona um número como marcador aos itens da lista.
lista quadrada Adiciona um quadrado sólido como marcador aos itens da lista.
lista-alfa Adiciona letras minúsculas como marcadores aos itens da lista.
lista-romana Adiciona algarismos romanos maiúsculos como marcadores aos itens da lista.
lista-grego Adiciona letras gregas minúsculas como marcadores aos itens da lista.
lista-latim inferior Adiciona letras latinas minúsculas como marcadores aos itens da lista.
lista-latim-superior Adiciona letras latinas maiúsculas como marcadores aos itens da lista.

Sintaxe

<element class="list-decimal">...</element>

Para usar qualquer uma das classes de tipo de estilo de lista no Tailwind CSS, basta adicionar a classe apropriada à lista não ordenada ou ao elemento da lista ordenada.

O exemplo a seguir demonstra as classes de tipo de estilo de lista 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-3">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold">List Style Type Class in Tailwind CSS</p>
<div class="bg-gray-50 text-justify px-6 py-3 rounded font-medium">
<div>
<h3>list-disc</h3>
<ul class="list-disc">
<li>Learning through examples</li>
<li>A practical approach</li>
</ul>
</div>
<div>
<h3>list-decimal</h3>
<ol class="list-decimal">
<li>Learning through examples</li>
<li>A practical approach</li>
</ol>
</div>
<div>
<h3>list-none</h3>
<ul class="list-none">
<li>Learning through examples</li>
<li>A practical approach</li>
</ul>
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Por padrão, a classe list-disc é usada para listas não ordenadas e a classe list-decimal é usada para listas ordenadas.
No entanto, você pode alterar facilmente o tipo de estilo de lista usando a classe apropriada .
Este é outro exemplo que se concentra na implementação de classes de tipo de estilo de lista 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-3">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold">List Style Type Class in Tailwind CSS</p>
<div class="bg-gray-50 text-justify px-6 py-3 rounded font-medium">
<div>
<h3>list-disc</h3>
<ul class="list-disc">
<li>Master Tailwind CSS</li>
<li>Learn from us</li>
</ul>
</div>
<div>
<h3>list-decimal</h3>
<ol class="list-decimal">
<li>Master Tailwind CSS</li>
<li>Learn from us</li>
</ol>
</div>
<div>
<h3>list-none</h3>
<ul class="list-none">
<li>Master Tailwind CSS</li>
<li>Learn from us</li>
</ul>
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

Neste artigo, discutimos os vários tipos de estilo de lista disponíveis no Tailwind CSS e como usá-los em seus projetos.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone