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 Types



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:

Example: 

<!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:

Example: 

<!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.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *