Tailwind CSS List Style Position

The list-style-position property in Tailwind CSS is used to specify the position of the marker for a list item.

Syntax

Here's the syntax for using the list-style-position property in Tailwind CSS:

/* Using Utilities */
.list-inside {
  @apply list-inside;
}

.list-outside {
  @apply list-outside;
}

/* Using Configuration */
.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

Example

Let's see some examples to understand how the list-style-position property works in Tailwind CSS.

Using Utilities

<ul class="list-inside">
  <li>Lorem ipsum</li>
  <li>Dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
</ul>

<ul class="list-outside">
  <li>Lorem ipsum</li>
  <li>Dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
</ul>

Using Configuration

<ul class="list-inside-config">
  <li>Lorem ipsum</li>
  <li>Dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
</ul>

<ul class="list-outside-config">
  <li>Lorem ipsum</li>
  <li>Dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
</ul>

/* Tailwind Configuration */
{
  listStylePosition: {
    inside: 'inside',
    outside: 'outside',
  },
}

Output

After applying the above styles to the HTML elements, you will get the following output for inside and outside list items:

Using Utilities

Using Configuration

Explanation

The list-style-position property specifies whether the list-item markers should appear inside or outside the content flow of the list item. By default, the marker appears outside the content flow of the list item. You can use the list-inside utility or the list-style-position: inside CSS property to change the position of the marker to inside the content flow.

Use

You can use the list-style-position property when you want to change the position of the list marker in relation to the content of the list item.

Important Points

• The default value of the list-style-position property is outside.
• The list-inside utility changes the position of the marker to inside the content flow of the list item.
• The list-outside utility (which is the default) changes the position of the marker to outside the content flow of the list item.

Summary

• The list-style-position property in Tailwind CSS is used to specify the position of the marker for a list item.
• You can use the list-inside and list-outside utilities or the list-style-position: inside and list-style-position: outside CSS properties to change the position of the list marker.
• By default, the list marker appears outside the content flow of the list item.