Tailwind CSS - List Style Position

Styling List Markers: Inside & Outside

Tailwind CSS provides utilities to control the position of list item markers (like bullets or numbers). This small but important detail can significantly impact the alignment and readability of your lists.

List Style Position Utilities

You can control marker positioning with two main classes:

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

Understanding Marker Positioning

• list-inside: The marker is placed inside the list item’s content box. This means it becomes part of the text flow. If a list item wraps to a second line, the text will wrap underneath the marker.
• list-outside: This is the default browser behavior. The marker is placed outside the list item’s content box, in the ‘gutter’. If a list item wraps, all lines of text will be vertically aligned, creating a clean left edge.

Practical Examples

Example 1: Comparing list-inside and list-outside

This example clearly demonstrates the difference in text alignment when a list item contains enough content to wrap onto a new line.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>List Style Position</title>
</head>
<body class="bg-slate-50 font-sans p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- List Inside Example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-semibold text-slate-800 mb-3">Features (`list-inside`)</h3>
      <ul class="list-disc list-inside text-slate-600 space-y-2">
        <li>Unlimited projects and teams for better organization.</li>
        <li>Advanced analytics and reporting to track your progress effectively over time.</li>
        <li>24/7 priority support from our dedicated expert team.</li>
      </ul>
    </div>

    <!-- List Outside Example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="text-lg font-semibold text-slate-800 mb-3">Features (`list-outside`)</h3>
      <ul class="list-disc list-outside ml-4 text-slate-600 space-y-2">
        <li>Unlimited projects and teams for better organization.</li>
        <li>Advanced analytics and reporting to track your progress effectively over time.</li>
        <li>24/7 priority support from our dedicated expert team.</li>
      </ul>
    </div>

  </div>
</body>
</html>

Accessibility & Best Practices

Both list-inside and list-outside are fully accessible and correctly interpreted by screen readers. The choice is primarily aesthetic. However, keep these points in mind:

• Alignment: list-outside generally provides better text alignment for multi-line list items, which is often preferred for readability.
• Indentation: When using list-outside, you often need to add a margin or padding (e.g., ml-4 or pl-4) to the <ul> or <ol> element to prevent the markers from hanging outside the main content area or even off-screen.
• Styling Markers: In modern Tailwind, you can style the markers themselves using the marker: variant, for example: marker:text-blue-500 marker:font-bold.