List Style Type

Utilities for controlling the bullet/number style of a list.

Class reference

Usage

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

<ul class="list-disc">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>
<ol class="list-decimal">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ol>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

Responsive

To control the list style type of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-disc to apply the .list-disc utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

sm

md

lg

xl

<ul class="list-none sm:list-disc md:list-decimal lg:list-disc xl:list-none">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

Customizing

By default Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the theme.listStyleType section of your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      listStyleType: {
        none: 'none',
-       disc: 'disc',
-       decimal: 'decimal',
+       square: 'square',
+       roman: 'upper-roman',
      }
    }
  }

Responsive and pseudo-class variants

By default, only responsive variants are generated for list style type utilities.

You can control which variants are generated for the list style type utilities by modifying the listStyleType property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     listStyleType: ['responsive'],
+     listStyleType: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the list style type utilities in your project, you can disable them entirely by setting the listStyleType property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     listStyleType: false,
    }
  }

← Line Height   List Style Position →