list-style-position

Utilities for controlling the position of bullets and numbers in lists.

| | list-outside |

list-style-position: outside;

|

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

list-inside

• 5 cups chopped Porcini mushrooms
• 1/2 cup of olive oil
• 3lb of celery

list-outside

• 5 cups chopped Porcini mushrooms
• 1/2 cup of olive oil
• 3lb of celery

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

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.

On this page

• Quick reference
• Examples
  • Basic example
  • Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Copyright © 2026 Tailwind Labs Inc.·Trademark Policy