Tailwind CSS 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.

html

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

Preview

List item 1
List item 2
List item 3

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.

html

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

Preview

List item 1
List item 2
List item 3

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.

html

<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

Class	Properties
list-inside	list-style-position: inside;
list-outside	list-style-position: outside;

Windframe Tailwind blocks

blog

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.