Tailwind CSS List Style Position

Last Updated : 17 Feb, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS list-style-position Property. This class specifies the position of the marker box with respect to the principal block box.

List Style Position classes:

list-inside: In this value, the marker is the first element among the list item’s contents i.e the bullet points will be inside the list item.
list-outside: In this value, the marker is outside the principal block box i.e the bullet points will be outside the list item. This is the default value.

Syntax:

<element class="List Style Position">...</element>

Example:

HTML

<!DOCTYPE html>  
<head>  
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">  
</head>  
  
<body class="text-center mx-4 space-y-2">  
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1>  
    <b>Tailwind CSS List Style Position Class</b>  
    <div class="mx-24 bg-green-200 text-justify"> 
        <ul class="list-disc list-inside "> 
            <li>Self learning</li> 
            <li>Contribute at Open Source</li> 
            <li>Gain Stack overflow respect</li> 
        </ul> 
        <br> 
        <ul class="list-disc list-outside "> 
            <li>Self learning</li> 
            <li>Contribute at Open Source</li> 
            <li>Gain Stack overflow respect</li>         
        </ul> 
    </div> 
</body>  
  
</html>  