List Style Position

Utility	Properties
lsp-i	list-style-position: inside;
lsp-o	list-style-position: outside;

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

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>Butter 🧈</li>
    <li>Egg 🥚</li>
    <li>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 modifiers

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

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

Hover modifiers

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

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