- Components
- 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.
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
- 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-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 New
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.
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
