List Style Position

Utility	Properties
Error: 429

Inside

This example sets the list style position to inside. The list item markers will be placed inside the list item’s content area, affecting the text alignment.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-i lst-d p-4 pl-6 rad-1">
    <li class="tc-lead">Butter 🧈</li>
    <li class="tc-lead">Egg 🥚</li>
    <li class="tc-lead">Milk 🥛</li>
  </ul>
</div>

Outside

Initial value

This example sets the list style position to outside. The list item markers will be placed outside the list item’s content area, allowing the text to align normally.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-o lst-d p-4 pl-6 rad-1">
    <li class="tc-lead">Butter 🧈</li>
    <li class="tc-lead">Egg 🥚</li>
    <li class="tc-lead">Milk 🥛</li>
  </ul>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="lsp-o md:lsp-i ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="lsp-o h:lsp-i ..."></div>