Tailwind

Lists

Provides styles for static list elements.

Source Page Source

Demo

Unordered List

  • Mable Cormier
  • Shelia Lockman
  • Agnes Kihn-Denesik

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 ? '!variant-filled-primary' : '');
html
<a href={href} class="{classesActive(href)}">Page</a>