Тип стиля списка

Применение

Для создания маркированных или числовых списков используйте утилиты list-disc и list-decimal.

Адаптивность

Чтобы управлять типом стиля списка элемента списка в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите списка. Например, используйте .md:list-disc, чтобы применить утилиту list-disc только при средних размерах экрана и выше.

<ul class="list-none md:list-disc">
  <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>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

По умолчанию Tailwind предоставляет три утилиты для наиболее распространенных типов стилей списков. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.listStyleType Вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      listStyleType: {
        none: 'none',
-       disc: 'disc',
-       decimal: 'decimal',
+       square: 'square',
+       roman: 'upper-roman',
      }
    }
  }

Варианты

По умолчанию, только responsive варианты создаются для утилит list style type.

Вы можете контролировать, какие варианты создаются для утилит list style type для изменения свойства listStyleType в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       listStyleType: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения list style type, Вы можете полностью отключить их, установив для listStyleType свойство значение false в разделе corePlugins Вашего файла конфигурации:

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