How to create a custom list marker using Tailwind

This quick and easy guide will show you how to create your own custom list markers to suit your design. All the code used in this demo can be found in our repository: tailwind-custom-list-marker.

1. Prerequisites

• TailwindCSS added to your project

2. Adding Tailwind to our markup

Below is a sample ordered list which we will be using for our demo project:

    <ol>
        <li>
            First item
        </li>
        <li>      
            Second item
        </li>
    </ol>

The list should display as shown below if there are no default styles being applied to your list:

Lets add a few Tailwind classes to our our markup:

    <ol class="ml-4">
        <li class=" my-6
            before:content-['1'] before:text-purple-400 before:text-2xl 
            before:ring-2 before:ring-offset-2 before:ring-purple-500
            before:px-3 before:py-1 before:rounded-full
            before:mr-4
        ">
            First item
        </li>
        <li class=" my-6
            before:content-['2'] before:text-purple-400 before:text-2xl 
            before:ring-2 before:ring-offset-2 before:ring-purple-500
            before:px-3 before:py-1 before:rounded-full
            before:mr-4
        ">      
            Second item
        </li>
    </ol>

With the above styles applied our list should look like the below:

3. Conclusion

Tailwind also supports the ::marker CSS psuedo-element. However, it comes with a few limitations; only a limited set of properties are supported. Any complex styling needed won’t be able to accomplished with these properties. For a full list of currently supported properties, check out the MDN Docs. The approach taken in this guide gives us the most flexibility from a styling point of view via the ::before psuedo-element.