List Style Type

Controls the style of list items in ordered and unordered lists. Tailwind provides utilities for common list styles, including disc, decimal, square, and none. These utilities help you customize the appearance of lists to fit your design needs. In Tailwind v4, list style type utilities are optimized for better integration with custom fonts and variable fonts.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<ul class="list-disc">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol class="list-decimal">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Examples

Different list styles (disc and decimal)

<ul class="list-disc">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol class="list-decimal">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Edit in playground

Customizing list styles in a card

<!-- Customizing list styles -->
<div class="max-w-md mx-auto p-4">
  <h2 class="text-xl font-bold mb-4">Custom List Styles</h2>
  <ul class="list-disc pl-5 mb-4">
    <li class="mb-2">Unordered list item with disc style</li>
    <li class="mb-2">Another unordered item</li>
    <li>Last unordered item</li>
  </ul>
  <ol class="list-decimal pl-5">
    <li class="mb-2">Ordered list item with decimal style</li>
    <li class="mb-2">Another ordered item</li>
    <li>Last ordered item</li>
  </ol>
</div>

Edit in playground

List style type used in a modern interface

<!-- List style type in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4">Dashboard Overview</h2>
    <p class="font-semibold">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <h3 class="text-lg font-semibold mb-2">Recent Activity</h3>
    <ul class="list-disc pl-5 space-y-2">
      <li>New comment on your post</li>
      <li>Invoice #12345 paid</li>
      <li>New subscriber to your newsletter</li>
    </ul>
  </div>
</div>

Edit in playground

List style type used in a modern card design

<!-- List style type in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2">Modern Card Design</h2>
    <p class="text-lg font-medium italic">Subtitle with italic style</p>
  </div>
  <div class="p-6">
    <h3 class="text-lg font-semibold mb-4">Features</h3>
    <ul class="list-square pl-5 space-y-2">
      <li>Feature one</li>
      <li>Feature two</li>
      <li>Feature three</li>
    </ul>
  </div>
</div>

Edit in playground

Live Preview

Try the List Style Type utility with different values

Open Interactive Playground

Variants

list-none: no list style; list-disc: disc style for unordered lists; list-decimal: decimal style for ordered lists; list-square: square style for unordered lists

nonediscdecimalsquare