Skip to content
Related Articles

Related Articles

Improve Article

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

Output:

list style position 




My Personal Notes arrow_drop_up
Recommended Articles
Page :