Utilities for controlling the position of bullets/numbers in lists.
Control the position of the markers in a list using the list-inside
and list-outside
utilities.
.list-inside
.list-outside
<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>
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.
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'],
}
}
}
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,
}
}