list-style-position

Examples

Basic example

Use utilities like list-inside and list-outside to control the position of the markers and text indentation in a list:

<ul class="list-inside">  <li>5 cups chopped Porcini mushrooms</li>  <!-- ... --></ul><ul class="list-outside">  <li>5 cups chopped Porcini mushrooms</li>  <!-- ... --></ul>

Responsive design

Prefix a list-style-position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<ul class="list-outside md:list-inside ...">  <!-- ... --></ul>

Learn more about using variants in the variants documentation.