Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - List Style Type

Quiz

List Style Type in Tailwind CSS is a collection of predefined classes that allow you to quickly set the style of list markers, such as bullets or numbers, for unordered and ordered lists.

Tailwind CSS List Style Type Classes

Below is a list of Tailwind CSS List Style Type classes with properties for modifying the style and appearance of list items.

Class	CSS Properties
list-none	list-style-type: none;
list-disc	list-style-type: disc;
list-decimal	list-style-type: decimal;

Functionality Of Tailwind CSS List Style Type Classes

list-none: This class removes the list item markers, so there are no bullets or numbers.
list-disc: This class adds a disc bullet point in front of each list item.
list-decimal: This class adds numbers in front of each list item, creating a numbered list.

Tailwind CSS List Style Types Class Examples

Below are examples of Tailwind CSS List Style Type classes that show how we can change the appearance of list items using different utility classes from Tailwind CSS.

Applying Different List Style Types

This example uses the list style type classes from Tailwind CSS to replace the default list bullets with different styles. You will see examples of lists with disc bullets, decimal numbers, and no list markers to highlight the differences.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1>  
    <p class="underline">
        Applying <strong>List-desc</strong> class to List
    </p>
    <ul class="list-disc ml-4 mb-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>   
    <p class="underline">
        Applying <strong>List-decimal</strong> class to List
    </p>
    <ul class="list-decimal ml-4 mb-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
    <p class="underline">
        Applying <strong>List-none</strong> class to List
    </p>
    <ul class="list-none">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

List Style Types with Hover Effects

This example shows how to use Tailwind CSS List Style Type classes with hover effects to change the appearance of list items. Hover over the list items to see the different list markers.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS List Style Types
    </h1> 
     <h2 class="text-xl underline mt-8 mb-4">
         Hover to Display List Item Types
     </h2>
    <ul class="space-y-4"> 
        <li class="hover:text-blue-600 
            hover:before:content-['']">
            Disc marker on hover
        </li> 
        <li class=" hover:text-blue-600 
            hover:before:content-['1.']">
            Decimal marker on hover
        </li>
        <li class="hover:text-blue-600 ">
            No marker, nothing shows on hover
        </li>
    </ul>
</body>

</html>

Print Page