List style position

Class reference

# Usage

Control the position of the markers in a list using the list-inside and list-outside utilities.

<ul class="list-inside bg-gray-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

<ul class="list-outside bg-gray-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

# Responsive

To control the list style position of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-inside to apply the list-inside utility at only medium screen sizes and above.

<ul class="list-outside md:list-inside">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <!-- ... -->
</ul>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.