How to Style Lists in Tailwind CSS
In Tailwind CSS, you can control the type and specify the position of a list by using the following utility classes:
- List type:
- list-disc: unordered list (the markers are bullets)
- list-decimal: ordered list (the markers are numbers)
- list-none: no markers are shown
- List position:
- list-inside: the bullet points (or numbers) will be inside the list item
- list-outside: the bullet points (or numbers) will be outside the list item
You can also change the color of the bullet points (or numbers) by using the marker modifier, like so:
<ul class="list-disc marker:text-blue-500">
<LI>The first item</LI>
<li>The second item</li>
<li>The third item</li>
</ul>For more clarity, see the full example below.
Example
Screenshot:
The code (with explanations):
<body class="p-20">
<!-- unordered list, inside -->
<ul class="list-disc list-inside bg-blue-400">
<LI>The first item</LI>
<li>The second item</li>
<li>The third item</li>
</ul>
<br />
<!-- ordered list, outside -->
<ul class="list-decimal list-outside bg-green-400">
<LI>The first item</LI>
<li>The second item</li>
<li>The third item</li>
</ul>
<br />
<!-- Change color of the markers -->
<ul class="list-disc marker:text-blue-500">
<LI>The first item</LI>
<li>The second item</li>
<li>The third item</li>
</ul>
<br />
<!-- Change color of the decimal numbers -->
<ul class="list-decimal marker:text-amber-500">
<LI>The first item</LI>
<li>The second item</li>
<li>The third item</li>
</ul>
</body>Further reading:
- How to Create a Fixed Sidebar with Tailwind CSS
- Tailwind CSS: How to Create a Sticky/Affix NavBar
- How to create cut-out text effect with Tailwind CSS
- How to Add Drop Shadows in Tailwind CSS
- CSS: Styling Scrollbar Example
- CSS: Make a search field with a magnifying glass icon inside
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
