List Style Type

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

Default 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.

<ul class="list-none md:list-disc">
  <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>

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

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',
      }
    }
  }

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: {
      extend: {
        // ...
+       listStyleType: ['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→

Edit this page on GitHub