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>

That’s it. Happy coding & have a beautiful day!

Next Article: Tailwind CSS: How to Create Parallax Scrolling Effect

Series: Advanced Tailwind CSS Tutorials

Tailwind CSS