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>