1. Components
  2. Lists

Components

Tailwind CSS Lists

Create engaging lists using Tailwind CSS, a powerful tool for styling ordered and unordered elements, enhancing readability, and user experience.

Basic usage

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

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
  • Red
  • Yellow
  • Green
  • Blue
  • Indigo
  • Purple
  • Pink
  • Light
  • Dark
  • Gray
  • Red
  • Yellow
  • Green
  • Blue
  • Indigo
  • Purple
  • Pink
  • Light
  • Dark
  • Gray
  • Red
  • Yellow
  • Green
  • Blue
  • Indigo
  • Purple
  • Pink
  • Light