TailwindCSS removes all the default styles from every single HTML element. If you use an ordered or unordered list and expect the default circle icon, it wouldn’t be there but you can bring those circles back.
Listing Styles in TailwindCSS
You can bring the default listing styles back with TailwindCSS classes. For this, you have to add classes list-{type}
to the ul
or ol
tags. Here is an example of an ordered
list and unordered
list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="list-disc"> <li>First List Item</li> <li>Second List Item</li> <li>Third List Item</li> <li>Fourth List Item</li> </ul> <ol class="list-decimal"> <li>First List Item</li> <li>Second List Item</li> <li>Third List Item</li> <li>Fourth List Item</li> </ol> |
You can check the working code example on tailwind playground and the output is attached as a screenshot below.
Adding Custom Image as List Icon in TailwindCSS
You can also use your custom image to set it as the list icon in TailwindCSS. The class list-image
is used to specify the custom URL for an image. Here is an example that adds a custom image to list items in TailwindCSS.
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="list-image-[url(https://js.pngtree.com/web3/images/multiImage01.svg)]"> <li class="text-xl my-2 px-2">TailwindCSS</li> <li class="text-xl my-2 px-2">BulmaCSS</li> <li class="text-xl my-2 px-2">Bootstrap</li> <li class="text-xl my-2 px-2">Material UI</li> <li class="text-xl my-2 px-2">Chakra UI</li> </ul> |
The output of the above code is attached below and you can check the working example on the tailwind playground.
Conclusion
TailwindCSS resets the default list styles but you can bring them back if you need them on your website. You can also use an image to set a custom icon for your lists. If you are looking for icons, you can use the free SVG icons for TailwindCSS.