Tailwind

Lists

Provides styles for static list elements.

Source Page Source

Demo

Unordered List

  • Jane
  • Michael
  • Susan

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
<a {href} class="{classesActive(href)}">Page</a>