Skip to main content
USWDS + Tailwind

List

Organize related information into ordered or unordered lists with Tailwind CSS styles.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  • Unstyled list item
  • Unstyled list item
  • Unstyled list item
HTML
<div class="space-x-12 flex">


  <ul class="list-disc pl-8 mt-4 space-y-1">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
  </ul>


  <ol class="list-decimal pl-8 mt-4 space-y-1">
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
  </ol>


  <ul class="list-none">
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
  </ul>


</div>