Утилиты для управления положением маркеров/цифр в списках.
Управляйте положением маркеров и отступом текста в списке с помощью утилит list-inside и list-outside.
.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>Чтобы управлять позицией стиля списка элемента списка в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите списка. Например, используйте .md:list-inside, чтобы применить утилиту list-inside только при средних размерах экрана и выше.
<ul class="list-outside md:list-inside">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<!-- ... -->
</ul>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит list style position.
Вы можете контролировать, какие варианты создаются для утилит list style position для изменения свойства listStylePosition в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ listStylePosition: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения list style position, Вы можете полностью отключить их, установив для listStylePosition свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ listStylePosition: false,
}
}