Tailwind List Style Position

The list-style-position utility class in Tailwind CSS allows you to control the positioning of the list item markers (bullets or numbers) in unordered and ordered lists. With Tailwind's list-style-position class, you can easily adjust the appearance and alignment of list item markers.

Applying List Style Position

To apply a specific list style position to a list, you can use the list-{value} utility class, where {value} represents the desired list style position. Here are the available options:

• list-inside: Positions the list item markers inside the list item container (default).
• list-outside: Positions the list item markers outside the list item container.

<ul class="list-inside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Preview

In the above example, an unordered list <ul> element is styled with the list-inside class, which positions the list item markers inside the list item container.

Changing List Style Position

If you want to change the list style position for a specific list or override the default positioning, you can simply apply the desired list-{value} class. For example, to position the list item markers outside the list item container, you can use the list-outside class.

<ol class="list-outside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Preview

Responsive List Style Position

Tailwind CSS allows you to apply list style position classes responsively at different breakpoints. To use responsive list style position classes, you can append the breakpoint prefix to the utility class. For example, md:list-inside positions the list item markers inside the list item container starting from the medium breakpoint and above.

<ul class="list-inside md:list-outside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

In the above example, the list item markers are positioned inside the list item container by default (list-inside), but starting from the medium breakpoint and above, they are positioned outside the list item container (md:list-outside).

Tailwind List Style Position Class Table

Windframe Tailwind blocks

blog