Skip to content
Related Articles

Related Articles

Tailwind CSS List Style Position

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Feb, 2021
View Discussion
Improve Article
Save Article

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 :

Start Your Coding Journey Now!