1. Components
  2. Lists

Components

Tailwind CSS Lists

Build organized and readable Tailwind CSS lists. Display items inline or vertically with bullets, numbers, and checks using ordered and unordered Preline UI lists.

Setting the list style type

To create bulleted or numeric lists, use the .list-disc and .list-decimal utilities.

list-disc
  • Now this is a story all about how, my life got flipped turned upside down
  • And I like to take a minute and sit right here
  • I'll tell you how I became the prince of a town called Bel-Air
list-decimal
  1. Now this is a story all about how, my life got flipped turned upside down
  2. And I like to take a minute and sit right here
  3. I'll tell you how I became the prince of a town called Bel-Air
list-none
  • Now this is a story all about how, my life got flipped turned upside down
  • And I like to take a minute and sit right here
  • I'll tell you how I became the prince of a town called Bel-Air

List marker

Style the counters or bullets in lists using the marker modifier:

  • FAQ
  • License
  • Terms & Conditions

Although you can use it directly on an <li> element, you can also use it on a parent to avoid repeating yourself.

Separator

A basic form of the inline list with dotted separator.

  • FAQ
  • License
  • Terms & Conditions

Checked style

Replacing the default list style check style icons.

  • FAQ
  • License
  • Terms & Conditions
  • FAQ
  • License
  • Terms & Conditions
  • FAQ
  • License
  • Terms & Conditions

List checked color variations

Predefined list checked color styles.

  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light
  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light
  • Dark
  • Gray
  • Green
  • Blue
  • Red
  • Yellow
  • Light