List Style Position

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

Class reference

Usage

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

<ul class="list-inside bg-gray-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>
<ul class="list-outside bg-gray-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.

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

<ul class="list-inside sm:list-outside md:list-inside lg:list-outside xl:list-inside">
  <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>

Customizing

Responsive and pseudo-class 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: {
    // ...
-   listStylePosition: ['responsive'],
+   listStylePosition: ['responsive', '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,
 }
}