List Styles in TailwindCSS – [Add Custom List Icon]

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.

You can check the working code example on tailwind playground and the output is attached as a screenshot below.

Styling Lists in TailwindCSS

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.

The output of the above code is attached below and you can check the working example on the tailwind playground.

Custom List Icon in TailwindCSS

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.

 

Latest articles

Related articles