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

Tailwind CSS - List Style Position

Quiz

Tailwind CSS List Style Position is a utility class used to effectively control the positioning of list item markers (bullets and numbers) relative to the list items themselves.

Tailwind CSS List Style Position Classes

Below is a list of Tailwind CSS List Style Position classes that control where the list item markers appear in relation to the list item content.

Class	CSS Properties
list-inside	list-style-image: none;
list-outside	list-style-position: outside;

Functionality Of Tailwind CSS List Style Position Classes

list-inside: This class puts the bullet or number inside the list item's content area.
list-outside: This class puts the bullet or number outside the list item's content area.

Tailwind CSS List Style Position Class Examples

Below are examples of Tailwind CSS List Style Position classes that show how to position list item markers such as bullets or numbers inside or outside the content box.

Setting List Style Position

This HTML example shows how to use Tailwind CSS utility classes ('list-inside' and 'list-outside') to control the positioning of list markers (bullets) relative to list items. The 'list-inside' class places the markers inside the list items, while 'list-outside' positions them outside.

Example

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

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

</html>

Hover to See the List Item Position

This example shows the use of Tailwind CSS List Style Position classes to control the positioning of list item markers (bullets) relative to the list items themselves. The bullets are initially hidden and become visible inside or outside each list item upon hover.

Example

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS List Style Position
    </h2>  
    <p class="text-xl font-semibold mb-2 underline">
         Hover to see List Style Position Classes
    </p> 
    <div class="ml-4"> 
        <p class="underline">
            Applying <strong>list-inside</strong> class to List
        </p> 
        <ul class="list-inside">
            <li class="list-none hover:list-disc">1 cup strawberries</li>
            <li class="list-none hover:list-disc">1/2 cup blueberries</li>
            <li class="list-none hover:list-disc">1 banana</li>
        </ul>
       <p class="underline">
            Applying <strong>list-outside</strong> class to List
        </p>
        <ul class="list-outside">
            <li class="list-none hover:list-disc">1 cup strawberries</li>
            <li class="list-none hover:list-disc">1/2 cup blueberries</li>
            <li class="list-none hover:list-disc">1 banana</li>
        </ul>
    </div> 
</body>

</html>

Print Page