Tailwind is a CSS framework that offers numerous classes for styling lists. List markers are the symbols or characters that appear before each item in an ordered or unordered list. By default, for unordered lists, Tailwind uses bullets and for the ordered list it uses numbers. However, users can modify the appearance of the list markers according to their needs. They can create and customize lists with different types of markers, such as bullets, numbers, or icons.
This write-up will illustrate the working of list markers in Tailwind.
How List Markers Work in Tailwind?
List markers are used to style the ordered and unordered lists using the “marker” modifier. To use list markers in Tailwind, use the “marker” modifier with the list style types in the HTML program. For a better understanding, check out the given-provided steps:
Step 1: Utilize List Markers in HTML Program
Make an HTML program and use the list markers via the “marker” modifier to style ordered or unordered lists. For instance, we have used the “marker” modifier with “list-disc” unordered lists and “list-decimal” ordered lists:
<div class="h-screen p-10 ">
<ul class="marker:text-blue-700 list-disc pl-5 space-y-3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<br>
<ol class="marker:text-purple-800 list-decimal pl-5 space-y-3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
Here:
-
- “marker:text-blue-700” class sets the color of the list marker to blue.
- “list-disc” class sets the list marker style to a filled disc or circle.
- “marker:text-purple-800” class applies purple color to the list marker.
- “list-decimal” class sets the list marker style to decimal numbers.
- “pl-5” class adds 5 units of left padding to each list item.
- “space-y-3” class adds vertical spacing of 3 units between each list item.
- “<ul>” elements represent the unordered list.
- “<ol>” elements are used for the ordered list.
- “<li>” elements represent a list item.
Step 2: Verify Output
To verify whether the list markers are working properly or not, view the HTML web page:
In the above output, the list markers can be seen according to which they were styled.
Conclusion
List markers are the bullets or numbers before each item. They are used to style the ordered and unordered lists using the “marker” modifier. To use list markers in Tailwind, utilize the “marker” modifier with the list style types in the HTML program. For verification, view the HTML web page. This write-up has illustrated the working of list markers in Tailwind.
