Tailwind

Lists

Provides styles for static list elements.

Source Page Source

Demo

Unordered List

  • Heather Koch
  • Ruby Stracke
  • Janet Schiller

Apply the .list class to the parent. Wrap children with span elements to allow for horizontal spacing.

Ordered List

  1. 1 Numbered Item A
  2. 2 Numbered Item B
  3. 3 Numbered Item C

Description List

Note we insert an extra div element to control flex layout and aid with vertical list item spacing.

Item A
Description for A
Item B
Description for B
Item C
Description for C

Navigation List

While verbose, we do recommend you use all tags shown below to meet recommended accessibility guidelines.

To highlight active state, we recommend conditionally applying a background color to the anchor tag.

typescript
$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
html
<nav class="list-nav">
    <ul>
        <li>
            <a href="/elements/lists" class={classesActive("/elements/lists")}>
                <span class="badge bg-primary-500">📋</span>
                <span class="flex-auto">Lists</span>
            </a>
        </li>
    </ul>
</nav>