List Style Position

Utilities for controlling the position of bullets/numbers in lists.

Default class reference

Usage

Control the position of the markers and text indentation in a list using the list-inside and list-outside utilities.

<ul class="list-inside bg-rose-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>
<ul class="list-outside bg-rose-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

Responsive

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

<ul class="list-outside md:list-inside">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <!-- ... -->
</ul>

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

Customizing

Variants

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

You can control which variants are generated for the list style position utilities by modifying the listStylePosition 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: {
        // ...
+       listStylePosition: ['hover', 'focus'],
      }
    }
  }

Disabling

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

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

←List Style Type Placeholder Color→

Edit this page on GitHub