Lists

Class reference

Removing default list styling

Remove default list styles using the .list-reset utility.

<ul class="list-reset">
  <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>

Responsive

To preserve default list styles until a specific breakpoint, add a {screen}: prefix to the .list-reset utilitiy. For example, use .md:list-reset to apply the .list-reset utility at only medium screen sizes and above.

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

Customizing

Responsive and State Variants

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

You can control which variants are generated for the list utilities by modifying the lists property in the modules section of your Tailwind config file.

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

Disabling

If you don't plan to use the list utilities in your project, you can disable them entirely by setting the lists property to false in the modules section of your config file: