Skip to main content

Lists and List Styling

Lists (<ul> and <ol>) are fundamental HTML elements used for displaying structured content. In modern web design, they are commonly used not just for bullet points, but also as the basis for navigation menus, cards, and data summaries.

Utility classes allow us to easily manage marker styles, positioning, and convert vertical lists into flexible, horizontal layouts.


1. Removing Default List Styling​

By default, browsers apply left padding and markers (bullets for <ul>, numbers for <ol>). When creating navigation menus or complex custom components, you often need to strip these default styles entirely.

The list-none utility class removes the markers and the default padding/margin applied by the browser.

index.html
<ul class="list-none p-0 m-0">
  <li class="py-1">Item 1</li>
  <li class="py-1">Item 2</li>
</ul>

2. Controlling Marker Type (list-disc, list-decimal)​

Tailwind provides utilities to explicitly set the marker type, which is useful when you want to enforce a style or change an ordered list to use bullets, or vice versa.

UtilityDescriptionHTML Element
list-discStandard bullets (filled circles).<ul> or <ol>
list-decimalNumbers (1., 2., 3., etc.).<ul> or <ol>
list-squareSquare bullets (less common).<ul> or <ol>
index.html
<ol class="list-decimal pl-6">
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
Default Margin/Padding

When setting marker types, you still need to apply padding (e.g., pl-6) to the list container (<ul> or <ol>) to make space for the markers, as the marker utilities only control the type, not the spacing.


3. Positioning the Marker (list-inside, list-outside)​

The list-style-position property controls where the marker (bullet or number) appears relative to the list item's content.

A. list-inside​

The marker is placed inside the content flow of the <li>. If the list item wraps to a new line, the subsequent lines align underneath the marker.

B. list-outside (Default)​

The marker is placed outside the content flow. The list item's content is aligned underneath the start of the first line of text. This is typically preferred for better readability.

index.html
<ul class="list-disc list-outside pl-6">
  <li class="mb-2">
    This list item has a long description that wraps onto a second line.
    The text is aligned neatly below the start of the first line.
  </li>
  <li class="list-inside">
    This item uses list-inside. The text on the second line will align 
    underneath the marker, causing a slightly jagged left margin.
  </li>
</ul>

4. Creating Horizontal Lists (Navigation)​

Converting a standard vertical list into a horizontal navigation bar is a common use case. This is achieved using Flexbox utilities, often combined with list-none.

Steps:​

  1. Use list-none to strip default styles.
  2. Apply Flexbox (flex) to the <ul> or <ol> container.
  3. Use spacing utilities (gap-, mx-) on the <li> elements to space them out.
index.html
<nav>
  <ul class="list-none flex space-x-6 p-4 bg-gray-800 text-white rounded-lg">
    <li><a href="#" class="hover:text-blue-400">Home</a></li>
    <li><a href="#" class="hover:text-blue-400">About</a></li>
    <li><a href="#" class="hover:text-blue-400">Services</a></li>
    <li><a href="#" class="hover:text-blue-400">Contact</a></li>
  </ul>
</nav>

5. Full Example: Styled and Responsive Lists​

This example shows a responsive horizontal navigation bar and a standard vertical list.