list-style-type

Utilities for controlling the marker style of a list.

2025-03-29

Written by: tdtc

list-reset

Please use “none” to replace:

list-none

Basic example

Use utilities like list-disc and list-decimal to control the style of the markers in a list:

<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>
<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>
<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

Using a custom value

Use the list-[] syntax to set the marker based on a completely custom value:

<ol class="list-[upper-roman] ...">
  <!-- ... -->
</ol>

Ref

• style of a list
• Responsive design