List Style Type In Tailwind CSS
In this article, we will explore the different Tailwind list style types with examples and how to use them in your projects.
Tailwind CSS provides the ability to modify the list style type of unordered lists and ordered lists using the list-style-type utility classes.
It determines the style of the marker used for each list item, such as a bullet, number, or a custom symbol.
Tailwind List Style Type Classes
The following are the available Tailwind list style types:
| Types |
Overview |
| list-none |
Removes the bullet point or number from the list items. |
| list-disc |
Adds a solid circle as a bullet point to the list items. |
| list-decimal |
Adds a number as a bullet point to the list items. |
| list-square |
Adds a solid square as a bullet point to the list items. |
| list-alpha |
Adds lowercase letters as bullet points to the list items. |
| list-roman |
Adds uppercase Roman numerals as bullet points to the list items. |
| list-greek |
Adds lowercase Greek letters as bullet points to the list items. |
| list-lower-latin |
Adds lowercase Latin letters as bullet points to the list items. |
| list-upper-latin |
Adds uppercase Latin letters as bullet points to the list items. |
Syntax
<element class="list-decimal">...</element>
To use any of the list style type classes in Tailwind CSS, simply add the appropriate class to the unordered list or ordered list element.
The following example demonstrates the list style type classes in Tailwind:
<!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>
By default, the list-disc class is used for unordered lists and the list-decimal class is used for ordered lists.
However, you can easily change the list style type by using the
appropriate class.
This is another example that focuses on the implementation of Tailwind list style type classes:
<!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>
Conclusion
In this article, we have discussed the various list style types available in Tailwind CSS and how to use them in your projects.
